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

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

@@ -5,85 +5,139 @@
  * 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
+    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,9 +1,10 @@
 <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 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 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>
 </template>
 <script setup lang="ts">
@@ -13,4 +14,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 class="mt-14">
+        <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>

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

@@ -1,8 +1,15 @@
-<template>    
-    <span  v-if="setting?.collection" @click="viewRecord" class="text-primary-700 hover:text-primary-500 cursor-pointer">        
-            {{ displayText }}    
-    </span>
-    <span v-else>{{ displayText }}</span>
+<template>
+  <span
+    v-if="setting?.collection"
+    @click="viewRecord"
+    class="text-primary-700 hover:text-primary-500  dark:text-primary-400 cursor-pointer"
+  >
+    <slot>
+      {{ displayText }}
+    </slot>
+    
+  </span>
+  <span v-else>{{ displayText }}</span>
 </template>
 <script setup lang="ts">
 /**
@@ -11,35 +18,32 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-import { ForeignKey } from '~/types';
-
+import { ForeignKey } from "~/types";
 
-type SettingProp = {collection:string, displayField?:string}
-const modelValue = defineModel<ForeignKey>()
-const props = defineProps<{setting:SettingProp}>()
-const displayText = computed(()=>{
-    const s = props.setting
-    if (!modelValue.value) return undefined
-    else if(!s.collection) return modelValue.value    
-    else if(s.displayField) return modelValue.value[s.displayField]
-    else return modelValue.value.label
-})
-const {$event} = useNuxtApp()
-const viewer=ref()
+type SettingProp = { collection: string; displayField?: string };
+const modelValue = defineModel<ForeignKey>();
+const props = defineProps<{ setting: SettingProp }>();
+const displayText = computed(() => {
+  const s = props.setting;
+  if (!modelValue.value) return undefined;
+  else if (!s.collection) return modelValue.value;
+  else if (s.displayField) return modelValue.value[s.displayField];
+  else return modelValue.value.label;
+});
+const { $event } = useNuxtApp();
+const viewer = ref();
 const viewRecord = () => {
-    viewer.value = getDocument(props.setting.collection)?.viewer
-    
-    // getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
-    //getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
-    $event('ViewRecord',{
-        _id: modelValue.value?._id as string,
-        label: modelValue.value?.label as string,
-        eventId: randomUUID(),
-        documentName: props.setting.collection,
-        viewer: viewer.value,
-        readonly:true
-
-    })
+  viewer.value = getDocument(props.setting.collection)?.viewer;
 
-}
-</script>
+  // getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
+  //getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
+  $event("ViewRecord", {
+    _id: modelValue.value?._id as string,
+    label: modelValue.value?.label as string,
+    eventId: randomUUID(),
+    documentName: props.setting.collection,
+    viewer: viewer.value,
+    readonly: true,
+  });
+};
+</script>

package/templates/nuxt/components/select/SelectTemplate.vue.eta

@@ -0,0 +1,79 @@
+<template>
+  <Dropdown
+    @update:modelValue="change"
+    v-model="modelValue"
+    :options="options"
+    optionLabel="label"
+    optionValue="value"
+    :placeholder="placeholder"
+  />
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2024-02-26
+ * Author: Ks Tan
+ */
+import Dropdown from "primevue/dropdown";
+import { ForeignKey, FormCrudEvent } from "~/types";
+const emits = defineEmits(["change"]);
+const modelValue = defineModel<string>();
+const list = ref<ForeignKey[]>([]);
+
+const props = defineProps<{
+  documentName: string;
+  placeholder?: string;
+  showNull?: boolean;
+  allowAddNew?: boolean;
+  filter?: any
+}>();
+const options = ref<
+  {
+    value: string;
+    label: string;
+  }[]
+>([]);
+const getListOptions = async () => {
+  const filter = props.filter ?? {}
+  const res = await getDocumentApi(props.documentName).autoComplete("", filter);
+  list.value = res.data as ForeignKey[];
+  if (props.allowAddNew)
+    list.value.unshift({ _id: "new", code: "", label: t("addNew") });
+  if (props.showNull)
+    list.value.unshift({ _id: "", code: "", label: t("null") });
+  options.value = list.value.map((item) => ({
+    value: item._id,
+    label: item.label,
+  }));
+};
+onMounted(async () => {
+  await getListOptions();
+  if (modelValue.value) change(modelValue.value);
+});
+const getItem = (id: string) => list.value?.find((item) => item._id == id);
+
+const change = (id: string) => {
+  const selectedItem = getItem(id);
+  if (selectedItem?._id == "new") {
+    const doc = getDocument(props.documentName)?.docClass;
+    if (doc) {
+      const tmpdata = doc?.getReactiveData();
+      type DataType = typeof tmpdata.value;
+      onScreenAddDocument<DataType>(
+        props.documentName,
+        undefined,
+        async (eventType: FormCrudEvent, data: DataType) => {
+          if (eventType == FormCrudEvent.create) {
+            await getListOptions();
+            modelValue.value = data._id;
+            emits("change", data._id, getItem(data._id));
+          }
+        },
+      );
+    }
+  } else {
+    emits("change", id, selectedItem);
+  }
+};
+</script>

package/templates/nuxt/components/select/readme.md

@@ -0,0 +1 @@
+all static select filter