@simitgroup/simpleapp-generator 1.3.3-alpha → 1.3.5-alpha

package/templates/nuxt/components/header/button/HeaderButtonMenuPicker.vue._eta

@@ -5,52 +5,60 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
- 
-import Dialog from 'primevue/dialog';
-// import {ref} from 'vue'
-import {MenuData} from '~/types'
-const visible = defineModel<boolean>({default:true,required:true})
 
-// const emit = defineEmits(['select'])
-const selectMenu = (menuname:{name:string,children:any}) =>{
-  goTo(menuname.name)
-  visible.value=false  
-}
+import { MenuData } from "~/types";
+const visible = defineModel<boolean>({ default: true, required: true });
 
+// const emit = defineEmits(['select'])
+const selectMenu = (menuname: { name: string; children: any }) => {
+  goTo(menuname.name);
+  visible.value = false;
+};
 
-const m =  getMenustFromPageMeta()
-let treemenu:any[] = []
+const m = getMenustFromPageMeta();
+let treemenu: any[] = [];
 
-getMenustFromPageMeta().reduce((r, item) => {
-    item.split('/').
-    reduce((o, name) => {
-        var temp = (o.children = o.children || []).find(q => q.name === name);
-        if (!temp) o.children.push(temp = { name });
-        return temp;
+getMenustFromPageMeta().reduce(
+  (r, item) => {
+    item.split("/").reduce((o, name) => {
+      var temp = (o.children = o.children || []).find((q) => q.name === name);
+      if (!temp) o.children.push((temp = { name }));
+      return temp;
     }, r);
     return r;
-}, { children: treemenu })
+  },
+  { children: treemenu },
+);
 
-treemenu = treemenu.sort((a,b)=>a.name<b.name ?-1:1)
+treemenu = treemenu.sort((a, b) => (a.name < b.name ? -1 : 1));
 </script>
 <template>
-  
-    <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
-      <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
-      <div class="">
-        
-          <div v-for="m in treemenu.sort()" class="m-4">
-            
-            <h3>{{ t(m.name) }}</h3>
-            <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">              
-              <ButtonPrimary v-for="submenu in m.children.sort((a:any,b:any)=>a.name<b.name ?-1:1)" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
-                {{ t(submenu.name) }}
-              </ButtonPrimary>
-            </div>
-            
-          </div>
-          
+  <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
+  <Dialog
+    v-model:visible="visible"
+    modal
+    dismissableMask
+    position="top"
+    :header="t('pickDocument')"    
+    :pt="{root:{class:'h-6/7',},}"
+    :pt-options="{mergeProps:true,mergeSections:true}"
+  >
+    <div class="">
+      <div v-for="(m,index) in treemenu.sort()" class="m-4" :key="index">
+        <h3>{{ t(m.name) }}</h3>
+        <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">
+          <ButtonPrimary
+            v-for="(submenu,menuindex) in m.children.sort((a: any, b: any) =>
+              a.name < b.name ? -1 : 1,
+            )"
+            class="border rounded-lg p-2"
+            :key="menuindex"
+            @click="selectMenu(submenu)"
+          >
+            {{ t(submenu.name) }}
+          </ButtonPrimary>
         </div>
-    </Dialog>           
-    
+      </div>
+    </div>
+  </Dialog>
 </template>

package/templates/nuxt/components/header/button/HeaderButtonProfile.vue.eta

@@ -5,85 +5,141 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import Avatar from 'primevue/avatar';
-import Dropdown from 'primevue/dropdown';
-import OverlayPanel from 'primevue/overlaypanel';
-import {ref} from 'vue'
-
-
-const { locale,setLocale,locales } = useI18n()
-const colorMode = useColorMode()
-const modelValue = defineModel<boolean>()
-const mylocale = ref(locale)
-const colors = [{value:'light', name:t('light')},{value:'dark', name:t('dark')}]
-
-const toProfile = ()=>{    
-    modelValue.value=false
-
-    if(getCurrentXorg()){
-        navigateTo(`/${getCurrentXorg()}/profile`)
-    }else{
-        navigateTo(`/profile`)
-    }
-    
-}
-const saveLocale=async (v:string)=>{    
-    await setLocale(v)
-} 
-
+import Avatar from "primevue/avatar";
+import Dropdown from "primevue/dropdown";
+import OverlayPanel from "primevue/overlaypanel";
+import { ref } from "vue";
 
+const { locale, setLocale, locales } = useI18n();
+const colorMode = useColorMode();
+const modelValue = defineModel<boolean>();
+const mylocale = ref(locale);
+const colors = [
+  { value: "light", name: t("light") },
+  { value: "dark", name: t("dark") },
+];
+const goTenantPicker = () => {
+  modelValue.value = false;
+  navigateTo("/picktenant");
+};
+const toProfile = () => {
+  modelValue.value = false;
 
+  if (getCurrentXorg()) {
+    navigateTo(`/${getCurrentXorg()}/profile`);
+  } else {
+    navigateTo(`/profile`);
+  }
+};
+const saveLocale = async (v: string) => {
+  await setLocale(v);
+};
 </script>
 
-<template>          
-        <!-- <div class="bg-cover bg-center rounded-md p-3  cursor-pointer profile-button"  @click="toggle">
+<template>
+  <!-- <div class="bg-cover bg-center rounded-md p-3  cursor-pointer profile-button"  @click="toggle">
             <i class="pi pi-user dark:text-white"></i> -->
-            <!-- <img  :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" /> -->
-        <!-- </div> -->
-    
-        <Dialog appendTo="body" ref="userprofileoverlay" v-model:visible="modelValue" close-on-escape :header="t('profile')">
-            <!-- <div> -->
-                <!-- <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal"> -->
-                    <div  class="p-4">
-                        <!-- <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400"> -->
-                            <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5" >
-                                <div class="w-12 h-12 bg-cover bg-center rounded-md">
-                                    <img :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
-                                </div>
-                                <div class="flex flex-col" >
-                                    <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile()?.fullName }}</h1>
-                                    <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile()?.group }}</p>
-                                </div>
-                                
-                            </div>
-                            <div class="col-span-full">
-                                <label for="pick-lang" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('language') }}</label>
-                                <div class="mt-2">
-                                    <Dropdown inputId="pick-lang" @update:model-value="saveLocale" v-model="mylocale" option-value="code" option-label="name" :options="locales" >                                    
-                                    </Dropdown>                                   
-                                </div>
-                            </div>
-                            <div class="mt-3 col-span-full">
-                                <label for="pick-theme" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('theme') }}</label>
-                                <div class="mt-2">
-                                    <h1>Color mode: {{ $colorMode.value }}</h1>
+  <!-- <img  :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" /> -->
+  <!-- </div> -->
+
+  <Dialog
+    modal
+    dismissableMask
+    appendTo="body"
+    ref="userprofileoverlay"
+    v-model:visible="modelValue"
+    close-on-escape
+    :header="t('profile')"
+  >
+    <!-- <div> -->
+    <!-- <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal"> -->
+    <div class="p-4">
+      <!-- <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400"> -->
+      <div
+        class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5"
+      >
+        <div class="w-12 h-12 bg-cover bg-center rounded-md">
+          <img
+            :src="getAvatarLink(<string>getProfileEmail(), 32)"
+            alt=""
+            class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow"
+          />
+        </div>
+        <div class="flex flex-col">
+          <h1
+            class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2"
+          >
+            {{ getUserProfile()?.fullName }}
+          </h1>
+          <p
+            class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4"
+          >
+            {{ getUserProfile()?.group }}
+          </p>
+        </div>
+      </div>
+      <div class="pt-2 pb-2">
+        <TextTitle>{{ getUserProfile()?.branchName }}</TextTitle>
+        <TextPrimary @click="goTenantPicker">{{
+          t("switchDatabase")
+        }} </TextPrimary>
+      </div>
+      <div class="col-span-full">
+        <label
+          for="pick-lang"
+          class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300"
+          >{{ t("language") }}</label
+        >
+        <div class="mt-2">
+          <Dropdown
+            inputId="pick-lang"
+            @update:model-value="saveLocale"
+            v-model="mylocale"
+            option-value="code"
+            option-label="name"
+            :options="locales"
+          >
+          </Dropdown>
+        </div>
+      </div>
+      <div class="mt-3 col-span-full">
+        <label
+          for="pick-theme"
+          class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300"
+          >{{ t("theme") }}</label
+        >
+        <div class="mt-2">
+          <h1>Color mode: {{ $colorMode.value }}</h1>
+
+          <Dropdown
+            inputId="pick-theme"
+            v-model="colorMode.preference"
+            option-value="value"
+            option-label="name"
+            :options="colors"
+          >
+          </Dropdown>
+        </div>
+      </div>
 
-                                    <Dropdown inputId="pick-theme" v-model="colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
-                                    </Dropdown>
-                                   
-                                </div>
-                            </div>
+      <div class="mt-3 flex items-center justify-start w-full">
+        <button
+          class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm"
+          @click="toProfile"
+        >
+          {{ t("profile") }}
+        </button>
+        <button
+          class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-white ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm"
+          @click="logout()"
+        >
+          {{ t("logout") }}
+        </button>
+      </div>
+      <!-- </div> -->
+    </div>
+    <!-- </div> -->
 
-                            
-                            <div class="mt-3 flex items-center justify-start w-full">
-                                <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toProfile">{{ t('profile') }}</button>
-                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-white ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">{{ t('logout') }}</button>
-                            </div>                            
-                        <!-- </div> -->
-                    </div>
-                <!-- </div> -->
-                
-            <!-- </div> -->
-        </Dialog>
-    
-</template>
+    <!-- </div> -->
+  </Dialog>
+</template>

package/templates/nuxt/components/list/ListView.vue.eta

@@ -2,19 +2,25 @@
   <div class="relative">
     <div v-if="withFilter" class="flex flex-row">
       <InputText
-        placeholder="search"
+        :placeholder="t('searchKeyword')"
         v-model="searchvalue"
         class="w-full dark:text-white"
         type="search"
+        ref="listviewfilter"
       />
-      <ButtonPrimary v-if="withAddNew" @click="emits('add')"
-        ><i class="pi pi-plus"></i
-      ></ButtonPrimary>
+      <template v-if="withAddNew">
+        <ButtonText v-if="isMobile()" @click="emits('add')"
+          ><i class="pi pi-plus"></i
+        ></ButtonText>
+        <ButtonPrimary v-else @click="emits('add')"
+          ><i class="pi pi-plus"></i
+        ></ButtonPrimary>
+      </template>
     </div>
 
     <div
       v-if="showIndex"
-      class="flex flex-col fixed left-1 top-1/5 gap-2  z-10 rounded border bg-white dark:bg-black opacity-90"
+      class="flex flex-col fixed left-1 top-1/5 gap-2 z-10 rounded border bg-white dark:bg-black opacity-90"
     >
       <NuxtLink
         class="text-primary-600 dark:text-primary-400 text-lg p-2"
@@ -28,7 +34,9 @@
       <div>
         <div v-for="(item, index) in filterlist">
           <!-- :class="isMobile() ? '' : 'overflow overflow-y-scroll overflow-auto '" -->
-          <div :id="titleField && item[titleField][0]"></div>
+          <div
+            :id="titleField && item[titleField] && item[titleField][0]"
+          ></div>
           <div
             class="w-full bg-gray-400 dark:bg-gray-500 p-1 pl-2 top-0 sticky opacity-90"
             v-if="
@@ -37,8 +45,16 @@
           >
             <span>{{ item[titleField][0] }}</span>
           </div>
-          <div class=" border-l-none border-r-none listview-item border-t-2 dark:border-t-gray-700 hover:" >
-            <NuxtLink :to="url ? `${url}/${item[idField]}` : undefined" class="p-2">
+          <div
+            @click="onClick(index, item)"
+            :class="`border-l-none border-r-none listview-item dark:border-t-gray-700 ${
+              index > 0 ? 'border-t-2' : ''
+            }`"
+          >
+            <NuxtLink :to="getUrl(item)"
+            
+              class="p-2"
+            >
               <slot name="default" :item="item" :index="index">
                 <div class="flex flex-row">
                   <div class="flex-1 mr-2 dark:text-white">
@@ -55,9 +71,7 @@
       </div>
     </div>
     <div v-else>
-      <div
-        class="w-full h-20 p-2 border-l-none border-r-none "
-      >
+      <div class="w-full h-20 p-2 border-l-none border-r-none">
         <slot name="nodata">
           <div class="border-round border-1 surface-border p-4 surface-card">
             {{ t("noDataFound") }}
@@ -76,6 +90,8 @@
  */
 import { ref } from "vue";
 import { ListItem } from "~/types/listview";
+import _ from 'lodash'
+const listviewfilter = ref();
 const props = withDefaults(
   defineProps<{
     list: T[];
@@ -94,13 +110,21 @@ const props = withDefaults(
 const letters = ref<string[]>([]);
 let lastchar = "";
 
-const emits = defineEmits(["add"]);
+const emits = defineEmits(["add", "click"]);
 const searchvalue = ref("");
 const selecteditem = ref("");
 const clickRow = (item: ListItem) => {
   // emit('clickitem',item)
   // selecteditem.value = item.code
 };
+const getUrl = (item:any)=>{
+  if(props.url && props.idField) {
+    if(_.last(props.url)=='/') return `${props.url}${item[props.idField]}`
+    else return `${props.url}/${item[props.idField]}`
+  }
+  else return undefined
+  // :to="url ? `${url}/${item[idField]}` : undefined"
+}
 const filterlist = computed(() => {
   let newlist: T[] = [];
   if (!Array.isArray(props.list)) {
@@ -122,7 +146,6 @@ const filterlist = computed(() => {
   return newlist;
 });
 
-
 const allLetters = computed(() => {
   if (props.titleField && props.list) {
     return props.list
@@ -147,4 +170,12 @@ const showCategoryBar = (letter: string) => {
     return false;
   }
 };
+
+const onClick = (index: number, data: T) => {
+  emits("click", index, data);
+};
+
+onMounted(() => {
+  // if(props.withFilter) listviewfilter.value.$el.focus()
+});
 </script>

package/templates/nuxt/components/mobile/MobileToolbar.vue.eta

@@ -1,10 +1,15 @@
-<template>
-  <div class="w-full dark:bg-gray-800 z-20 justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
-  >
-    <div class="w-full text-left"><slot name="start"></slot></div>
-    <div class="w-full text-center"><slot name="center"></slot></div>
-    <div class="w-full text-right"><slot name="end"></slot></div>
-  </div>
+<template>  
+    <div v-bind="$attrs"
+      class="w-full dark:bg-gray-800 z-20 justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
+    >
+      <div class="text-left"><slot name="start"></slot></div>
+      <div class="flex-1 text-center line-clamp-2">
+        <slot name="center"></slot>
+      </div>
+      <div class="text-right"><slot name="end"></slot></div>
+    </div>
+    <div class="h-14"></div>
+  
 </template>
 <script setup lang="ts">
 /**
@@ -13,4 +18,4 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-</script>
+</script>

package/templates/nuxt/components/overlay/OverlayPanelWithToolBar.vue.eta

@@ -1,44 +1,42 @@
 <template>
-    <Sidebar
-      position="right"
-      v-if="showDialog"
-      v-model:visible="showDialog"
-      modal
-      :show-close-icon="false"
-      #container
-    >
-      <div class="overflow-y-scroll">        
-          <MobileToolbar class="bg-gray-800 text-white">
-              <template #start>
-                  <slot name="headerLeft"></slot>        
-              </template>
-              <template #center>
-                  <slot name="headerCenter"></slot>        
-              </template>
-              <template #end>
-                  <slot name="headerRight"></slot>        
-              </template>
-          </MobileToolbar>
-        <div  class="mt-14">
-          <slot name="default"></slot>
-        </div>
+  <Sidebar
+    position="right"
+    v-if="showDialog"
+    v-model:visible="showDialog"
+    modal
+    :show-close-icon="false"
+    #container
+  >
+    <div class="overflow-y-scroll">
+      <MobileToolbar class="bg-gray-800 text-white">
+        <template #start>
+          <slot name="headerLeft"></slot>
+        </template>
+        <template #center>
+          <slot name="headerCenter"></slot>
+        </template>
+        <template #end>
+          <slot name="headerRight"></slot>
+        </template>
+      </MobileToolbar>
+      <div >
+        <slot name="default"></slot>
       </div>
-    </Sidebar>
-  </template>
-  <script lang="ts" setup>
-  /**
+    </div>
+  </Sidebar>
+</template>
+<script lang="ts" setup>
+/**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
  * last change 2023-10-28
  * Author: Ks Tan
  */
-  const showDialog = defineModel<boolean>({ required: true });
-  const props = defineProps<{ closeEventName: string }>();
-  useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
-    if (props.closeEventName == closeEventName){    
-       showDialog.value = false;
-      }
-  });
-  
-  </script>
-  
+const showDialog = defineModel<boolean>({ required: true });
+const props = defineProps<{ closeEventName: string }>();
+useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
+  if (props.closeEventName == closeEventName) {
+    showDialog.value = false;
+  }
+});
+</script>

package/templates/nuxt/components/overlay/OverlaySideBarCrud.vue.eta

@@ -22,9 +22,8 @@
 const showDialog = defineModel<boolean>({ required: true });
 const props = defineProps<{ closeEventName: string }>();
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
-  if (props.closeEventName == closeEventName){    
-     showDialog.value = false;
-    }
+  if (props.closeEventName == closeEventName) {
+    showDialog.value = false;
+  }
 });
-
 </script>

package/templates/nuxt/components/renderer/RendererDate.vue.eta

@@ -1,5 +1,6 @@
 <template>
-  <span>{{ toLocalDate(value ?? "") }}</span>
+  <span v-if="modelValue">{{ toLocalDate(modelValue) }}</span>
+  <span v-else>-</span>
 </template>
 <script lang="ts" setup>
 /**
@@ -8,5 +9,5 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const props = defineProps<{ value?: string }>();
+const modelValue = defineModel<Date|string>()
 </script>