MPM-9 Add usageType selector to Company Registration form (#59)

EnAccess · Mar 13, 2024 · c2f54e6 · c2f54e6
1 parent 01f0b1a
commit c2f54e6
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 17 deletions.
diff --git a/Website/ui/src/modules/Register/Register.vue b/Website/ui/src/modules/Register/Register.vue
@@ -121,15 +121,35 @@
                     <div class="exclamation">
                         <div>
                             <div class="md-layout-item md-size-100 exclamation-div">
-                                <h2 class="stepper-title"> Please select the plugin(s) you would like to use with your
-                                    MicroPowerManager</h2>
+                                <h2 class="stepper-title"> Please select usage type and the plugin(s) you would like to use with your MicroPowerManager</h2>
+                            </div>
+                            <div class="md-layout-item md-size-50 md-small-size-100">
+                                <md-field
+                                    :class="{'md-invalid': errors.has('Plugins.usage_type')}">
+                                    <label for="usage_type">Usage Type</label>
+                                    <md-select
+                                        name="usage_type"
+                                        id="usage_type"
+                                        v-model="companyForm.usage_type"
+                                    >
+                                    <md-option disabled>Select Usage Types</md-option>
+                                    <md-option v-for="ut in usageTypeListService.list" :key="ut.id"
+                                        :value="ut.value">{{ ut.name }}
+                                    </md-option>
+                                    </md-select>
+                                    <span class="md-error">{{errors.first('Plugins.usage_type')}}</span>
+                                </md-field>
                             </div>
                             <div class="md-layout md-gutter">
-                                <div v-for="plugin in mpmPluginsService.list" :key=plugin.id class="box md-layout-item  md-size-25 md-small-size-50">
-                                    <div class="header-text">{{ plugin.name }}
-                                        <input type="checkbox" v-model="plugin.checked"/>
-                                    </div>
+                                <div v-for="plugin in mpmPluginsService.list.filter(p => validUsageType(p.usage_type, companyForm.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 && !validUsageType(plugin.usage_type, companyForm.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" class="plugin-selector-switch"/>
 
                                 </div>
                             </div>
@@ -274,13 +294,15 @@
 <script>
 import { MpmPluginService } from '@/services/MpmPluginService'
 import { CompanyService } from '@/services/CompanyService'
+import { UsageTypeListService } from '@/services/UsageTypeListService'
 
 export default {
     name: 'Register',
     data () {
         return {
             mpmPluginsService: new MpmPluginService(),
             companyService: new CompanyService(),
+            usageTypeListService: new UsageTypeListService(),
             loadingNextStep: false,
             activeStep: 'Company-Form',
             firstStepClicked: false,
@@ -303,6 +325,7 @@ export default {
                     password: '',
                     confirmPassword: ''
                 },
+                usage_type: '',
                 plugins: []
             },
             successMessage: '',
@@ -311,6 +334,7 @@ export default {
     },
     mounted () {
         this.mpmPluginsService.getMpmPlugins()
+        this.usageTypeListService.getUsageTypes()
     },
     methods: {
         async nextStep (id, index) {
@@ -370,6 +394,9 @@ export default {
                 this.succeed = false
                 this.loading = false
             }
+        },
+        validUsageType(plugin_usage_type, customer_usage_types) {
+            return plugin_usage_type === 'general' || customer_usage_types.includes(plugin_usage_type)
         }
     },
 }
@@ -465,6 +492,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;
@@ -478,4 +516,9 @@ export default {
     display: flex;
     border-bottom: 1px solid #bbb;
 }
-</style>
+
+.plugin-selector-switch {
+    margin-left: 3rem !important;
+    float: right;
+}
+</style>
diff --git a/Website/ui/src/modules/Settings/MainSettings.vue b/Website/ui/src/modules/Settings/MainSettings.vue
@@ -98,7 +98,7 @@
                     <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"
+                        <md-option v-for="ut in usageTypeListService.list" :key="ut.id"
                                    :value="ut.value">{{ ut.name }}
                         </md-option>
                     </md-select>
@@ -140,7 +140,6 @@ export default {
             currencyList: [],
             languagesList: [],
             countryList: [],
-            usageTypeList: [],
             progress: false,
         }
 
@@ -185,7 +184,7 @@ export default {
         },
         async getUsageTypeList () {
             try {
-                await this.usageTypeListService.list()
+                await this.usageTypeListService.getUsageTypes()
             } catch (e) {
                 this.alertNotify('error', e.message)
             }

diff --git a/Website/ui/src/services/UsageTypeListService.js b/Website/ui/src/services/UsageTypeListService.js
@@ -4,21 +4,23 @@ import { ErrorHandler } from '@/Helpers/ErrorHander'
 export class UsageTypeListService {
     constructor() {
         this.repository = Repository.get('usageType')
-        this.usageTypeList = []
+        this.list = []
     }
 
-    async list() {
+    async getUsageTypes () {
         try {
+            this.list = []
             let response = await this.repository.list()
-            if (response.status === 200) {
-                this.usageTypeList = response.data.data
-                return this.usageTypeList
+            if (response.status === 200 || response.status === 201) {
+                this.list  = response.data.data
+                return this.list
             } else {
                 return new ErrorHandler(response.error, 'http', response.status)
             }
         } catch (e) {
-            let erorMessage = e.response.data.message
-            return new ErrorHandler(erorMessage, 'http')
+            let errorMessage = e.response.data.data.message
+            return new ErrorHandler(errorMessage, 'http')
         }
+
     }
 }