From 64a50450aca037088685282294657f545f25bf1d Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Tue, 4 Mar 2025 19:43:16 +0530
Subject: [PATCH] Implement Progress logs

- Implement Progress logs in Vue3
- JIRA: https://jsw.ibm.com/browse/PFEBMC-2379

Signed-off-by: Nikhil Ashoka <a.nikhil@ibm.com>
---
 src/router/routes.js                         |  19 +
 src/store/index.js                           |   2 +
 src/store/modules/Logs/PostCodeLogsStore.js  |  21 +-
 src/views/Logs/PostCodeLogs/PostCodeLogs.vue | 416 +++++++++----------
 src/views/Logs/PostCodeLogs/PostCodes.vue    |   7 +-
 5 files changed, 238 insertions(+), 227 deletions(-)

diff --git a/src/router/routes.js b/src/router/routes.js
index faf102ef1c..163fe802b2 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -15,6 +15,8 @@ import KeyClear from '@/views/Operations/KeyClear/KeyClear.vue';
 import RebootBmc from '@/views/Operations/RebootBmc';
 import FactoryReset from '@/views/Operations/FactoryReset';
 import Memory from '@/views/ResourceManagement/Memory';
+import PostCodes from '@/views/Logs/PostCodeLogs/PostCodes.vue';
+import PostCodeLogs from '@/views/Logs/PostCodeLogs/PostCodeLogs.vue';
 import Power from '@/views/ResourceManagement/Power';
 import PowerRestorePolicy from '@/views/Settings/PowerRestorePolicy';
 import ConcurrentMaintenance from '../views/HardwareStatus/ConcurrentMaintenance/ConcurrentMaintenance.vue';
@@ -75,6 +77,15 @@ export const routes = [
     },
     component: ServiceLoginConsoles,
   },
+  // Needs reimplementation once routes is implemented
+  {
+    path: '/console/post-codes',
+    name: 'post-codes',
+    component: PostCodes,
+    meta: {
+      title: i18n.global.t('appPageTitle.postCodes'),
+    },
+  },
   {
     path: '/',
     meta: {
@@ -179,6 +190,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.auditLogs'),
         },
       },
+      {
+        path: '/logs/post-code-logs',
+        name: 'post-code-logs',
+        component: PostCodeLogs,
+        meta: {
+          title: i18n.global.t('appPageTitle.postCodeLogs'),
+        },
+      },
       {
         path: '/operations/kvm',
         name: 'kvm',
diff --git a/src/store/index.js b/src/store/index.js
index dd424d6dde..e3c40d6701 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -34,6 +34,7 @@ import DeconfigurationRecordsStore from './modules/Logs/DeconfigurationRecordsSt
 import NetworkSettingsStore from './modules/Operations/NetworkSettingsStore.js';
 import LdapStore from './modules/SecurityAndAccess/LdapStore.js';
 import FieldCoreOverrideStore from './modules/ResourceManagement/FieldCoreOverrideStore.js';
+import PostCodeLogsStore from './modules/Logs/PostCodeLogsStore.js'
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -57,6 +58,7 @@ export {
   ChassisStore,
   PowerSupplyStore,
   PcieSlotsStore,
+  PostCodeLogsStore,
   FanStore,
   MemoryStore,
   BmcStore,
diff --git a/src/store/modules/Logs/PostCodeLogsStore.js b/src/store/modules/Logs/PostCodeLogsStore.js
index cb647b151a..7c9106fba6 100644
--- a/src/store/modules/Logs/PostCodeLogsStore.js
+++ b/src/store/modules/Logs/PostCodeLogsStore.js
@@ -1,19 +1,15 @@
+import { defineStore } from 'pinia';
 import api from '@/store/api';
 
-const PostCodeLogsStore = {
-  namespaced: true,
-  state: {
+export const PostCodeLogsStore = defineStore('postCodeLogs', {
+  state: () => ({
     allPostCodes: [],
-  },
+  }),
   getters: {
-    allPostCodes: (state) => state.allPostCodes,
-  },
-  mutations: {
-    setAllPostCodes: (state, allPostCodes) =>
-      (state.allPostCodes = allPostCodes),
+    allPostCodesGetter: (state) => state.allPostCodes,
   },
   actions: {
-    async getPostCodesLogData({ commit }) {
+    async getPostCodesLogData() {
       return await api
         .get('/redfish/v1/Systems/system/LogServices/PostCodes/Entries')
         .then(({ data: { Members = [] } = {} }) => {
@@ -21,6 +17,7 @@ const PostCodeLogsStore = {
           const postCodeLogs = Members.map((log) => {
             const { Created, MessageArgs, AdditionalDataURI } = log;
             return {
+              toggleDetails: false,
               date: new Date(Created),
               bootCount: MessageArgs[0],
               timeStampOffset: MessageArgs[1],
@@ -28,13 +25,13 @@ const PostCodeLogsStore = {
               uri: AdditionalDataURI,
             };
           });
-          commit('setAllPostCodes', postCodeLogs);
+          this.allPostCodes = postCodeLogs;
         })
         .catch((error) => {
           console.log('POST Codes Log Data:', error);
         });
     },
   },
-};
+});
 
 export default PostCodeLogsStore;
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index ee9b34c15e..47e5ca84b5 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -1,36 +1,36 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.postCodeLogs')" />
-    <b-row>
-      <b-col xl="12" class="text-right">
-        <b-button variant="dark" type="button" @click="openConsoleWindow()">
+    <BRow>
+      <BCol xl="12" class="text-right">
+        <BButton variant="dark" type="button" @click="openConsoleWindow()">
           <icon-launch />
           {{ $t('pagePostCodeLogs.viewCodesInRealtime') }}
-        </b-button>
-      </b-col>
-    </b-row>
+        </BButton>
+      </BCol>
+    </BRow>
     <div class="section-divider mb-4 mt-4"></div>
-    <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+    <BRow class="align-items-start">
+      <BCol sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
           @change-search="onChangeSearchInput"
           @clear-search="onClearSearchInput"
         />
-        <div class="ml-sm-4">
+        <div sm="3" md="3" xl="2" class="cellCountStyle">
           <table-cell-count
             :filtered-items-count="filteredRows"
             :total-number-of-cells="allLogs.length"
           ></table-cell-count>
         </div>
-      </b-col>
-      <b-col sm="8" md="7" xl="6">
+      </BCol>
+      <BCol sm="8" md="7" xl="6">
         <table-date-filter @change="onChangeDateTimeFilter" />
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col>
-        <b-table
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol>
+        <BTable
           id="table-post-code-logs"
           ref="table"
           responsive="md"
@@ -38,6 +38,7 @@
           no-select-on-click
           sort-icon-left
           hover
+          sticky-header="75vh"
           no-sort-reset
           sort-by="date"
           :sort-desc="true"
@@ -46,29 +47,33 @@
           :items="filteredLogs"
           :empty-text="$t('global.table.emptyMessage')"
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :per-page="perPage"
-          :current-page="currentPage"
-          :filter="searchFilter"
+          :per-page="perPageVal"
+          :current-page="currentPageNo"
+          :filter="searchFilterInputVal"
           :busy="isBusy"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredLogs.length)"
         >
           <!-- Expand chevron icon -->
           <template #cell(expandRow)="row">
-            <b-button
+            <BButton
               variant="link"
               :aria-label="expandRowLabel"
               :title="expandRowLabel"
-              class="btn-icon-only"
+              :class="
+                row.item.toggleDetails
+                  ? 'rotateSvg btn-icon-only'
+                  : 'btn-icon-only'
+                "
               @click="fetchSrcDetails(row)"
             >
               <icon-chevron />
-            </b-button>
+            </BButton>
           </template>
           <template #row-details="{ item }">
-            <b-container fluid
-              ><b-row>
-                <b-col>
+            <BContainer fluid
+              ><BRow>
+                <BCol>
                   <dl>
                     <!-- SRC Details -->
                     <dt>
@@ -83,113 +88,94 @@
                       {{ dataFormatter(srcData[item.timeStampOffset]) }}
                     </dd>
                   </dl>
-                </b-col>
-              </b-row>
-            </b-container>
+                </BCol>
+              </BRow>
+            </BContainer>
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <p class="mb-0">{{ $filters.formatDate(value) }}</p>
+            <p class="mb-0">{{ $filters.formatTime(value) }}</p>
           </template>
-        </b-table>
-      </b-col>
-    </b-row>
+        </BTable>
+      </BCol>
+    </BRow>
 
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
-        <b-form-group
+    <BRow>
+      <BCol sm="6">
+        <BFormGroup
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
           label-for="pagination-items-per-page"
         >
-          <b-form-select
+          <BFormSelect
             id="pagination-items-per-page"
-            v-model="perPage"
-            :options="itemsPerPageOptions"
+            v-model="perPageVal"
+            :options="itemsPerPageOptionsVal"
           />
-        </b-form-group>
-      </b-col>
-      <b-col sm="6">
-        <b-pagination
-          v-model="currentPage"
+        </BFormGroup>
+      </BCol>
+      <BCol sm="6">
+        <BPagination
+          v-model="currentPageNo"
+          class="b-pagination"
           first-number
           last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
+          :per-page="perPageVal"
+          :total-rows="getTotalRowCount(filteredRows, perPageVal)"
           aria-controls="table-post-code-logs"
         />
-      </b-col>
-    </b-row>
-  </b-container>
+      </BCol>
+    </BRow>
+  </BContainer>
 </template>
 
-<script>
+<script setup>
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import api from '@/store/api';
 import i18n from '@/i18n';
 import { omit } from 'lodash';
-import PageTitle from '@/components/Global/PageTitle';
-import Search from '@/components/Global/Search';
-import TableCellCount from '@/components/Global/TableCellCount';
-import TableDateFilter from '@/components/Global/TableDateFilter';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import BVPaginationMixin, {
-  currentPage,
-  perPage,
-  itemsPerPageOptions,
-} from '@/components/Mixins/BVPaginationMixin';
-import BVTableSelectableMixin, {
-  selectedRows,
-  tableHeaderCheckboxModel,
-  tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import Search from '@/components/Global/Search.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import TableDateFilter from '@/components/Global/TableDateFilter.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useTableFilter from "../../../components/Composables/useTableFilterComposable";
+import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
+import usePaginationComposable from '@/components/Composables/usePaginationComposable';
+import useTableSelectableComposable from '@/components/Composables/useTableSelectableComposable';
+import useToastComposable from "@/components/Composables/useToastComposable";
+import useTableSortComposable from '../../../components/Composables/useTableSortComposable';
+import useTableRowExpandComposable from "../../../components/Composables/useTableRowExpandComposable";
+import useSearchFilterComposable from "../../../components/Composables/useSearchFilterComposable";
+import { ref, onMounted, computed } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import { PostCodeLogsStore } from "../../../store";
 
-export default {
-  components: {
-    IconLaunch,
-    PageTitle,
-    Search,
-    TableCellCount,
-    TableDateFilter,
-    IconChevron,
-    InfoTooltip,
-  },
-  mixins: [
-    BVPaginationMixin,
-    BVTableSelectableMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    TableFilterMixin,
-    TableSortMixin,
-    TableRowExpandMixin,
-    SearchFilterMixin,
-    DataFormatterMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      srcData: {},
-      isBusy: true,
-      fields: [
+    const {
+      clearSelectedRows,
+      toggleSelectRow,
+      onRowSelected,
+      onChangeHeaderCheckbox,
+      selectedRowsList,
+      tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate,
+    } = useTableSelectableComposable();
+    const { dataFormatter } = useDataFormatterGlobal();
+    const { searchFilterInput } = useSearchFilterComposable();
+    const { currentPage, perPage, itemsPerPageOptions, getTotalRowCount } = usePaginationComposable();
+    const { getFilteredTableData, getFilteredTableDataByDate } = useTableFilter();
+    const { toggleRowDetails } = useTableRowExpandComposable();
+    const { expandRowLabel } = useTableRowExpandComposable();
+    const { errorToast } = useToastComposable();
+    const { hideLoader, startLoader, endLoader } = useLoadingBar();
+    const postCodeLogsStore = PostCodeLogsStore();
+    const srcData = ref({});
+    const isBusy = ref(true)
+    const fields = ref([
         {
           key: 'expandRow',
           label: '',
@@ -197,110 +183,95 @@ export default {
         },
         {
           key: 'date',
-          label: this.$t('pagePostCodeLogs.table.created'),
+          label: i18n.global.t('pagePostCodeLogs.table.created'),
           sortable: true,
         },
         {
           key: 'timeStampOffset',
-          label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
+          label: i18n.global.t('pagePostCodeLogs.table.timeStampOffset'),
         },
         {
           key: 'bootCount',
-          label: this.$t('pagePostCodeLogs.table.bootCount'),
+          label: i18n.global.t('pagePostCodeLogs.table.bootCount'),
         },
         {
           key: 'postCode',
-          label: this.$t('pagePostCodeLogs.table.postCode'),
-        },
-      ],
-      expandRowLabel,
-      activeFilters: [],
-      currentPage: currentPage,
-      filterStartDate: null,
-      filterEndDate: null,
-      itemsPerPageOptions: itemsPerPageOptions,
-      perPage: perPage,
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      selectedRows: selectedRows,
-      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
-      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
-    };
-  },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.filteredLogs.length;
-    },
-    allLogs() {
-      return this.$store.getters['postCodeLogs/allPostCodes'].map(
-        (postCodes) => {
-          return {
-            ...postCodes,
-            actions: [
-              {
-                value: 'export',
-                title: this.$t('pagePostCodeLogs.action.exportLogs'),
-              },
-              {
-                value: 'download',
-                title: this.$t('pagePostCodeLogs.action.downloadDetails'),
-              },
-            ],
-          };
+          label: i18n.global.t('pagePostCodeLogs.table.postCode'),
         },
+      ])
+    const activeFiltersData = ref([]);
+    const currentPageNo = ref(currentPage);
+    const filterStartDate= ref( null);
+    const filterEndDate= ref(null)
+    const itemsPerPageOptionsVal = ref(itemsPerPageOptions);
+    const perPageVal = ref(perPage);
+    const searchFilterInputVal = ref(searchFilterInput);
+    const searchTotalFilteredRows = ref(0);
+    const selectedRows= ref(selectedRowsList);
+    const tableHeaderCheckboxModelVal = ref(tableHeaderCheckboxModel);
+    const tableHeaderCheckboxIndeterminateVal = ref(tableHeaderCheckboxIndeterminate);
+
+  onMounted(() => {
+    startLoader();
+    postCodeLogsStore.getPostCodesLogData().finally(() => {
+      endLoader();
+      isBusy.value = false;
+    });
+  })
+  onBeforeRouteLeave(() => {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    hideLoader();
+  });
+
+    const filteredRows = computed(() => {
+      return searchFilterInputVal.value
+        ? searchTotalFilteredRows.value
+        : filteredLogs.value.length;
+    })
+    const allLogs = computed(() => {
+      return postCodeLogsStore.allPostCodesGetter;
+    });
+    const batchExportData = computed(() => {
+      return selectedRows.value.map((row) => omit(row, 'actions'));
+    })
+    const filteredLogsByDate = computed(() => {
+      return getFilteredTableDataByDate(
+        allLogs.value,
+        filterStartDate.value,
+        filterEndDate.value,
       );
-    },
-    batchExportData() {
-      return this.selectedRows.map((row) => omit(row, 'actions'));
-    },
-    filteredLogsByDate() {
-      return this.getFilteredTableDataByDate(
-        this.allLogs,
-        this.filterStartDate,
-        this.filterEndDate,
-      );
-    },
-    filteredLogs() {
-      return this.getFilteredTableData(
-        this.filteredLogsByDate,
-        this.activeFilters,
+    })
+    const filteredLogs = computed(() => {
+      return getFilteredTableData(
+        filteredLogsByDate.value,
+        activeFiltersData.value,
       );
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store.dispatch('postCodeLogs/getPostCodesLogData').finally(() => {
-      this.endLoader();
-      this.isBusy = false;
-    });
-  },
-  methods: {
-    fetchSrcDetails(row) {
-      this.toggleRowDetails(row);
+    })
+
+    const fetchSrcDetails = (row) => {
+      row.item.toggleDetails = !row.item.toggleDetails;
+      toggleRowDetails(row);
       if (!row.detailsShowing) {
         const { timeStampOffset, uri, postCode } = row.item;
-        if (!this.srcData[timeStampOffset]) {
+        if (!srcData.value[timeStampOffset]) {
           api
             .get(uri)
-            .then((response) => this.generateSrcWords(response.data))
-            .then((srcWords) =>
-              this.$set(
-                this.srcData,
-                timeStampOffset,
-                `${postCode.trim()} ${srcWords}`,
-              ),
+            .then((response) => generateSrcWords(response.data))
+            .then((srcWords) => {
+              srcData.value[timeStampOffset] = `${postCode.trim()} ${srcWords}`;
+            }
             )
             .catch(() =>
-              this.errorToast(i18n.t('pagePostCodeLogs.toast.errorSrcFetch')),
+              errorToast(i18n.global.t('pagePostCodeLogs.toast.errorSrcFetch')),
             );
         }
       }
-    },
-    generateSrcWords(data) {
-      const decodedData = Buffer.from(data, 'base64').toString('hex');
-      const srcBulk = decodedData.substring(16, 80).toUpperCase();
+    }
+    const generateSrcWords = (data) => {
+      const decodedData = atob(data); // `atob` decodes base64 to ASCII string
+      const hexData = Array.from(decodedData).map(c => c.charCodeAt(0).toString(16)).join('');
+      const srcBulk = hexData.substring(16, 80).toUpperCase();
       if (!isNaN(srcBulk) && !Number(srcBulk)) {
         return '';
       }
@@ -309,26 +280,26 @@ export default {
         srcWords += `${srcBulk.substring(i, i + 8)} `;
       }
       return srcWords.trim();
-    },
-    openConsoleWindow() {
+    }
+    const openConsoleWindow = () => {
       window.open(
-        '#/console/post-codes',
+        `${window.location.origin}/console/post-codes`,
         '_blank',
         'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=200,height=200',
       );
-    },
-    onFilterChange({ activeFilters }) {
-      this.activeFilters = activeFilters;
-    },
-    onChangeDateTimeFilter({ fromDate, toDate }) {
-      this.filterStartDate = fromDate;
-      this.filterEndDate = toDate;
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
+    }
+    const onFilterChange = ({ activeFilters }) => {
+      activeFiltersData.value = activeFilters;
+    }
+    const onChangeDateTimeFilter = ({ fromDate, toDate }) => {
+      filterStartDate.value = fromDate;
+      filterEndDate.value = toDate;
+    }
+    const onFiltered = (filteredItems) => {
+      searchTotalFilteredRows.value = filteredItems.length;
+    }
     // Create export file name based on date and action
-    exportFileNameByDate(value) {
+    const exportFileNameByDate = (value) => {
       let date = new Date();
       date =
         date.toISOString().slice(0, 10) +
@@ -336,14 +307,35 @@ export default {
         date.toString().split(':').join('-').split(' ')[4];
       let fileName;
       if (value === 'download') {
-        fileName = this.$t('pagePostCodeLogs.downloadFilePrefix');
+        fileName = i18n.global.t('pagePostCodeLogs.downloadFilePrefix');
       } else if (value === 'export') {
-        fileName = this.$t('pagePostCodeLogs.exportFilePrefix');
+        fileName = i18n.global.t('pagePostCodeLogs.exportFilePrefix');
       } else {
-        fileName = this.$t('pagePostCodeLogs.allExportFilePrefix');
+        fileName = i18n.global.t('pagePostCodeLogs.allExportFilePrefix');
       }
       return fileName + date;
-    },
-  },
-};
+    }
+    const onChangeSearchInput = (event) => {
+      searchFilterInputVal.value = event;
+    }
+    const onClearSearchInput = () => {
+      searchFilterInputVal.value = '';
+    };
 </script>
+<style lang="scss" scoped>
+  .text-right {
+    text-align: right;
+  }
+  .cellCountStyle {
+    margin-bottom: 22px;
+    margin-left: 15px;
+  }
+  .container-fluid {
+    width: calc(100% - 126px);
+  }
+  .rotateSvg {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+</style>
diff --git a/src/views/Logs/PostCodeLogs/PostCodes.vue b/src/views/Logs/PostCodeLogs/PostCodes.vue
index 8b624d14dd..d2587f0504 100644
--- a/src/views/Logs/PostCodeLogs/PostCodes.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodes.vue
@@ -1,10 +1,11 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     {{ postCodes }}
-  </b-container>
+  </BContainer>
 </template>
 
 <script>
+import { GlobalStore } from "../../../store";
 export default {
   name: 'PostCodes',
   data() {
@@ -14,7 +15,7 @@ export default {
   },
   computed: {
     postCodeValue() {
-      return this.$store.getters['global/postCodeValue'];
+      return GlobalStore().postCodeValueGetter;
     },
     postCodes: {
       get() {