From 1abd48e6251e1fb8f4158f0df66f3f045a18261c Mon Sep 17 00:00:00 2001
From: Mihail Marcu <marku.michael@gmail.com>
Date: Fri, 18 Feb 2022 10:55:15 +0200
Subject: [PATCH] #201: Capitalize the itemName since the query depends on this

---
 packages/vue/src/components/SpCrud/SpCrud.vue | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/vue/src/components/SpCrud/SpCrud.vue b/packages/vue/src/components/SpCrud/SpCrud.vue
index 53990c7e..ac2863f6 100644
--- a/packages/vue/src/components/SpCrud/SpCrud.vue
+++ b/packages/vue/src/components/SpCrud/SpCrud.vue
@@ -1,9 +1,10 @@
 <template>
+
   <div v-if="moduleAvailable" class="container crud--position">
     <div class="row">
       <div class="col-6">
         <SpTypography modifier="highlight" size="md" style="font-weight: 700">
-          {{ itemName }} items
+          {{ moduleName }} items
         </SpTypography>
       </div>
       <div class="col-6 text-align--right">
@@ -15,8 +16,8 @@
 
     <SpCrudRead
       :store-name="storeName"
-      :item-name="itemName"
-      :command-name="`/Query${itemName}All`"
+      :item-name="moduleName"
+      :command-name="`/Query${moduleName}All`"
       @createItem="visibleModal = 'create-item'"
       @editItem="
         (item) => {
@@ -35,31 +36,31 @@
     <SpCrudCreate
       v-if="visibleModal === 'create-item'"
       :store-name="storeName"
-      :item-name="itemName"
-      :command-name="`/sendMsgCreate${itemName}`"
+      :item-name="moduleName"
+      :command-name="`/sendMsgCreate${moduleName}`"
       @close="visibleModal = ''"
     />
     <SpCrudUpdate
       v-if="visibleModal === 'edit-item'"
       :store-name="storeName"
-      :item-name="itemName"
+      :item-name="moduleName"
       :item-data="activeItem"
-      :command-name="`/sendMsgUpdate${itemName}`"
+      :command-name="`/sendMsgUpdate${moduleName}`"
       @close="visibleModal = ''"
     />
     <SpCrudDelete
       v-if="visibleModal === 'delete-item'"
       :store-name="storeName"
-      :item-name="itemName"
+      :item-name="moduleName"
       :item-data="activeItem"
-      :command-name="`/sendMsgDelete${itemName}`"
+      :command-name="`/sendMsgDelete${moduleName}`"
       @close="visibleModal = ''"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
+import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
 import { useStore } from 'vuex'
 
 import SpButton from '../SpButton'
@@ -117,11 +118,17 @@ export default defineComponent({
 
     // state
     let state: State = reactive(initialState)
+    let moduleName = computed (() =>
+      props.itemName.replace(/^\w/, (c) => c.toUpperCase())
+    )
+
+    console.log(moduleName.value)
 
     state.moduleAvailable = $s.hasModule(props.storeName)
 
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      moduleName
     }
   }
 })