MPM-9 Add usageType to main settings view (#49)

* Add `usageType` to main settings view

* Remove develop statements

* Simplify the service

* Filter plugins based on valid usage Type

* Apply lint fix

* More lint fixes

* Fix lint after merge

* Change case for computed properties

to be more consistent with the project.

Website/ui/src/modules/Settings/MainSettings.vue

@@ -93,6 +93,18 @@
                 </md-field>
                 <span class="md-error">{{ errors.first('vat_appliance') }}</span>
             </div>
+            <div class="md-layout-item md-size-50 md-small-size-100">
+                <md-field :class="{'md-invalid': errors.has('usage_type')}">
+                    <label for="usage_type">Usage Type</label>
+                    <md-select name="usage_type" id="usage_type" v-model="mainSettingsService.mainSettings.usageType">
+                        <md-option disabled>Select Usage Types</md-option>
+                        <md-option v-for="ut in usageTypeListService.usageTypeList" :key="ut.id"
+                                   :value="ut.value">{{ ut.name }}
+                        </md-option>
+                    </md-select>
+                </md-field>
+                <span class="md-error">{{ errors.first('usage_type') }}</span>
+            </div>
             <div class="md-layout md-alignment-bottom-right">
                 <md-button class="md-primary md-dense md-raised" @click="updateMainSettings">Save</md-button>
             </div>
@@ -107,6 +119,7 @@
 import { CurrencyListService } from '@/services/CurrencyListService'
 import { LanguagesService } from '@/services/LanguagesService'
 import { CountryListService } from '@/services/CountryListService'
+import { UsageTypeListService } from '@/services/UsageTypeListService'
 import { MainSettingsService } from '@/services/MainSettingsService'
 import { EventBus } from '@/shared/eventbus'
 
@@ -123,9 +136,11 @@ export default {
             currencyListService: new CurrencyListService(),
             languagesService: new LanguagesService(),
             countryListService: new CountryListService(),
+            usageTypeListService: new UsageTypeListService(),
             currencyList: [],
             languagesList: [],
             countryList: [],
+            usageTypeList: [],
             progress: false,
         }
 
@@ -140,6 +155,7 @@ export default {
         this.getCurrencyList()
         this.getLanguagesList()
         this.getCountryList()
+        this.getUsageTypeList()
     },
     methods: {
         fetchMainSettings () {
@@ -167,6 +183,13 @@ export default {
                 this.alertNotify('error', e.message)
             }
         },
+        async getUsageTypeList () {
+            try {
+                await this.usageTypeListService.list()
+            } catch (e) {
+                this.alertNotify('error', e.message)
+            }
+        },
 
         async updateMainSettings () {
             this.progress = true

Website/ui/src/modules/Settings/PluginSettings.vue

@@ -1,9 +1,11 @@
 <template>
     <div>
         <div class="md-layout md-gutter">
-            <div v-for="plugin in plugins" :key=plugin.id class="box md-layout-item  md-size-25 md-small-size-50">
+            <div v-for="plugin in enrichedPlugins.filter(p => p.plugin_for_usage_type || p.checked)" :key=plugin.id class="box md-layout-item  md-size-25 md-small-size-50">
                 <div class="header-text">{{ plugin.name }}</div>
+                <div class="usage-type-warning" v-if="plugin.checked && !plugin.plugin_for_usage_type">⚠️ Plugin not supported for current usageType. It is recommended that you disable this plugin.</div>
                 <small class="sub-text">{{ plugin.description }}</small>
+                <div class="sub-text">Usage type: {{ plugin.usage_type }}</div>
                 <md-switch v-model="plugin.checked" @change="onSwitchChange($event,plugin)" class="data-stream-switch"
                            :disabled="switching"/>
             </div>
@@ -32,6 +34,21 @@ export default {
         plugins: {
             type: Array,
             required: true
+        },
+        mainSettings: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        enrichedPlugins: function() {
+            return this.plugins.map(plugin => ({
+                ...plugin,
+                plugin_for_usage_type: this.validUsageType(
+                    plugin.usage_type,
+                    this.mainSettings.usageType
+                )
+            }))
         }
     },
     methods: {
@@ -57,6 +74,9 @@ export default {
                 title: type + ' !',
                 text: message
             })
+        },
+        validUsageType(plugin_usage_type, customer_usage_types) {
+            return plugin_usage_type === 'general' || customer_usage_types.includes(plugin_usage_type)
         }
     }
 }
@@ -83,6 +103,17 @@ export default {
     font-size: 0.7rem;
 }
 
+.usage-type-warning {
+    font-weight: 400;
+    font-size: 0.7rem;
+    background-color: #f0f0f0;
+    padding: 5px;
+    border-radius: 5px;
+    color: #333333;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // Optional: Add shadow for depth
+    max-width: 400px; // Optional: Set maximum width for responsiveness
+}
+
 .stepper-title {
     text-align: center !important;
     font-size: large !important;
@@ -101,4 +132,4 @@ export default {
     margin-left: 3rem !important;
     float: right;
 }
-</style>
+</style>

Website/ui/src/modules/Settings/Settings.vue

@@ -9,7 +9,7 @@
                     <main-settings :mainSettings="mainSettings"/>
                 </md-tab>
                 <md-tab id="tab-plugin" md-icon="widgets" md-label="Plugins">
-                    <plugin-settings :plugins="plugins"/>
+                    <plugin-settings :plugins="plugins" :mainSettings="mainSettings"/>
                 </md-tab>
                 <md-tab id="tab-sms" name="sms" md-icon="sms" md-label="Sms">
                     <sms-settings/>
@@ -75,6 +75,7 @@ export default {
                     id: plugin.id,
                     name: plugin.name,
                     description: plugin.description,
+                    usage_type: plugin.usage_type,
                     checked: foundPlugin && foundPlugin.status === 1
                 }
             })
@@ -92,4 +93,4 @@ export default {
         height: 200px;
     }
 }
-</style>
+</style>

Website/ui/src/repositories/RepositoryFactory.js

@@ -76,6 +76,7 @@ import ManufacturerRepository from '@/repositories/ManufacturerRepository'
 import EBikeRepository from '@/repositories/EBikeRepository'
 import TransactionExportRepository from '@/repositories/TransactionExportRepository'
 import OutstandingDebtsExportRepository from '@/repositories/OutstandingDebtsExportRepository'
+import UsageTypeRepository from '@/repositories/UsageTypeRepository'
 
 const repositories = {
     'address': AddressRepository,
@@ -156,6 +157,7 @@ const repositories = {
     'eBike': EBikeRepository,
     'transactionExport': TransactionExportRepository,
     'outstandingDebtsExportRepository': OutstandingDebtsExportRepository,
+    'usageType': UsageTypeRepository,
 }
 
 export default {

Website/ui/src/repositories/UsageTypeRepository.js

@@ -0,0 +1,10 @@
+import Client from './Client/AxiosClient'
+import { baseUrl } from './Client/AxiosClient'
+
+const resource = `${baseUrl}/api/usage-types`
+
+export default {
+    list() {
+        return Client.get(`${resource}`)
+    },
+}

Website/ui/src/services/MainSettingsService.js

@@ -13,6 +13,7 @@ export class MainSettingsService {
             language: null,
             vatEnergy: null,
             vatAppliance: null,
+            usageType: null,
         }
     }
 
@@ -26,6 +27,7 @@ export class MainSettingsService {
             language: mainSettings.language,
             vatEnergy: mainSettings.vat_energy,
             vatAppliance: mainSettings.vat_appliance,
+            usageType: mainSettings.usage_type,
         }
         return this.mainSettings
     }
@@ -55,6 +57,7 @@ export class MainSettingsService {
                 language: this.mainSettings.language,
                 vat_energy: this.mainSettings.vatEnergy,
                 vat_appliance: this.mainSettings.vatAppliance,
+                usage_type: this.mainSettings.usageType,
             }
             let response = await this.repository.update(mainSettingsPm.id,
                 mainSettingsPm)

Website/ui/src/services/MpmPluginService.js

@@ -21,7 +21,7 @@ export class MpmPluginService {
                         description:plugin.description,
                         checked:false,
                         root_class:plugin.root_class,
-
+                        usage_type: plugin.usage_type
                     }
                 })
                 return this.list

Website/ui/src/services/UsageTypeListService.js

@@ -0,0 +1,24 @@
+import Repository from '../repositories/RepositoryFactory'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
+
+export class UsageTypeListService {
+    constructor() {
+        this.repository = Repository.get('usageType')
+        this.usageTypeList = []
+    }
+
+    async list() {
+        try {
+            let response = await this.repository.list()
+            if (response.status === 200) {
+                this.usageTypeList = response.data.data
+                return this.usageTypeList
+            } else {
+                return new ErrorHandler(response.error, 'http', response.status)
+            }
+        } catch (e) {
+            let erorMessage = e.response.data.message
+            return new ErrorHandler(erorMessage, 'http')
+        }
+    }
+}