Re-modeled Power restore radio buttons

When a user selects a radio button and saves, the selected setting should be patched.
  - Computed properties on generated bootstrap-vue radio buttons causes errors.

- Re-modeled radio buttons to take Redfish api data on component render.
- Mapped selected radio button value to patch the Redfish api property.
- Added translations.

Signed-off-by: Kenneth Fullbright <kennyneedsmilky@gmail.com>
Change-Id: I22ce75d9ef840d7f0c2659bba855093e5b4559f4

3 files changed, 36 insertions, 20 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 66b3e2fd..d10763ed 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -728,6 +728,11 @@
       "AlwaysOff": "Always off",
       "LastState": "Last state"
     },
+    "policiesDesc": {
+      "AlwaysOn": "Always on - The system always powers on when power is applied.",
+      "AlwaysOff": "Always off - The system always remains powered off when power is applied.",
+      "LastState": "Last state - The system returns to its last on or off power state when power is applied."
+    },
     "toast": {
       "errorSaveSettings": "Error saving settings.",
       "successSaveSettings": "Power restore policy updated successfully."
diff --git a/src/store/modules/Settings/PowerPolicyStore.js b/src/store/modules/Settings/PowerPolicyStore.js
index 4e76cdfe..54efa2c1 100644
--- a/src/store/modules/Settings/PowerPolicyStore.js
+++ b/src/store/modules/Settings/PowerPolicyStore.js
@@ -1,7 +1,7 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
 
-const PowerControlStore = {
+const PowerPolicyStore = {
   namespaced: true,
   state: {
     powerRestoreCurrentPolicy: null,
@@ -43,22 +43,22 @@ const PowerControlStore = {
         );
     },
     async getPowerRestoreCurrentPolicy({ commit }) {
-      api
+      return await api
         .get('/redfish/v1/Systems/system')
         .then(({ data: { PowerRestorePolicy } }) => {
           commit('setPowerRestoreCurrentPolicy', PowerRestorePolicy);
         })
         .catch((error) => console.log(error));
     },
-    async setPowerRestorePolicy({ commit }, powerPolicy) {
+    async setPowerRestorePolicy({ dispatch }, powerPolicy) {
       const data = { PowerRestorePolicy: powerPolicy };
 
       return await api
         .patch('/redfish/v1/Systems/system', data)
-        .then(() =>
-          commit('setPowerRestoreCurrentPolicy', data.PowerRestorePolicy)
-        )
-        .then(() => i18n.t('pagePowerRestorePolicy.toast.successSaveSettings'))
+        .then(() => {
+          dispatch('getPowerRestoreCurrentPolicy');
+          return i18n.t('pagePowerRestorePolicy.toast.successSaveSettings');
+        })
         .catch((error) => {
           console.log(error);
           throw new Error(
@@ -69,4 +69,4 @@ const PowerControlStore = {
   },
 };
 
-export default PowerControlStore;
+export default PowerPolicyStore;
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index 8589aed3..06e30f3e 100644
--- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -5,15 +5,11 @@
     <b-row>
       <b-col sm="8" md="6" xl="12">
         <b-form-group :label="$t('pagePowerRestorePolicy.powerPoliciesLabel')">
-          <b-form-radio
-            v-for="policy in powerRestorePolicies"
-            :key="policy.state"
+          <b-form-radio-group
             v-model="currentPowerRestorePolicy"
-            :value="policy.state"
+            :options="options"
             name="power-restore-policy"
-          >
-            {{ policy.desc }}
-          </b-form-radio>
+          ></b-form-radio-group>
         </b-form-group>
       </b-col>
     </b-row>
@@ -41,6 +37,7 @@ export default {
   data() {
     return {
       policyValue: null,
+      options: [],
     };
   },
   computed: {
@@ -58,12 +55,24 @@ export default {
   },
   created() {
     this.startLoader();
-    Promise.all([
-      this.$store.dispatch('powerPolicy/getPowerRestorePolicies'),
-      this.$store.dispatch('powerPolicy/getPowerRestoreCurrentPolicy'),
-    ]).finally(() => this.endLoader());
+    this.renderPowerRestoreSettings();
   },
   methods: {
+    renderPowerRestoreSettings() {
+      Promise.all([
+        this.$store.dispatch('powerPolicy/getPowerRestorePolicies'),
+        this.$store.dispatch('powerPolicy/getPowerRestoreCurrentPolicy'),
+      ]).finally(() => {
+        this.options.length = 0;
+        this.powerRestorePolicies.map((item) => {
+          this.options.push({
+            text: this.$t(`pagePowerRestorePolicy.policiesDesc.${item.state}`),
+            value: `${item.state}`,
+          });
+        });
+        this.endLoader();
+      });
+    },
     submitForm() {
       this.startLoader();
       this.$store
@@ -73,7 +82,9 @@ export default {
         )
         .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
+        .finally(() => {
+          this.renderPowerRestoreSettings();
+        });
     },
   },
 };