@simitgroup/simpleapp-generator 1.6.3-alpha → 1.6.4-alpha

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

@@ -1,18 +1,19 @@
 <template>
-  <div>
+  <div class="w-full">
     <div class="flex flex-row">
-      <label v-if="!hideLabel" :for="fieldid" class="pt-2">
+      <label v-if="!hideLabel" :for="fieldid">
         {{ t(documentName) }}
       </label>
-      <ButtonText
+      <div
         v-if="allowAddNew"
         @click="addnew"
-        class="text-xs text-blue-600"
+        class="cursor-pointer ml-2 pt-1 text-xs text-blue-600"
       >
         <span>{{ t("new") }}</span>
-      </ButtonText>
+      </div>
     </div>
     <MultiSelect
+      class="w-full md:w-full"
       :input-id="fieldid"
       v-if="multiple"
       display="chip"
@@ -21,18 +22,39 @@
       :options="options"
       optionLabel="label"
       optionValue="value"
+      filter
       :placeholder="placeholder"
-    />
+    >
+    <template #value="slotProps">
+      <slot name="value" :slotProps="slotProps">
+      </slot>
+    </template>
+    <template #option="slotProps">
+      <slot name="default" :option="slotProps.option" :index="slotProps.index">
+      </slot>
+    </template>
+      
+    </MultiSelect>
     <Dropdown
+      class="w-full md:w-full"
       :input-id="fieldid"
       v-else
       @update:modelValue="change"
+      filter
       v-model="modelValue"
       :options="options"
       optionLabel="label"
       optionValue="value"
       :placeholder="placeholder"
-    />
+    >
+    <template #value="slotProps">
+      <slot name="value" :item="getItem(modelValue)"></slot>
+    </template>
+      <template #option="slotProps" >
+        <slot name="default" :option="slotProps.option" :index="slotProps.index"></slot>        
+      </template>
+
+    </Dropdown>
   </div>
 </template>
 <script setup lang="ts">
@@ -44,11 +66,11 @@
  */
 import Dropdown from "primevue/dropdown";
 
-import { ForeignKey,SimpleAppDocuments, FormCrudEvent } from "~/types";
+import { ForeignKey, SimpleAppDocuments, FormCrudEvent } from "~/types";
 const emits = defineEmits(["change"]);
 
 const props = defineProps<{
-  documentName: SimpleAppDocuments;
+  documentName: keyof SimpleAppDocuments;
   placeholder?: string;
   showNull?: boolean;
   allowAddNew?: boolean;
@@ -66,6 +88,7 @@ const options = ref<
   {
     value: string;
     label: string;
+    more:any;
   }[]
 >([]);
 const getListOptions = async () => {
@@ -79,38 +102,41 @@ const getListOptions = async () => {
   options.value = list.value.map((item) => ({
     value: item._id,
     label: item.label,
+    more: item
   }));
 };
 onMounted(async () => {
+  
   await getListOptions();
   if (modelValue.value) change(modelValue.value);
 });
-const getItem = (id: string) => list.value?.find((item) => item._id == id);
+const getItem = (id: string) => list.value?.find((item) => {  
+return  item._id == id
+});
 
-const change = (id: string|string[]) => {
+const change = (id: string | string[]) => {
   const selectedItem = getItem(id);
   emits("change", id, selectedItem);
+  // console.log("changed",selectedItem)
 };
 
 const addnew = () => {
-  const doc = getDocument(props.documentName )?.docClass;
+  const doc = getDocument(props.documentName)?.docClass;
   if (doc) {
     const tmpdata = doc?.getReactiveData();
     type DataType = typeof tmpdata.value;
     onScreenAddDocument<DataType>(
-      props.documentName ,
+      props.documentName,
       undefined,
       async (eventType: FormCrudEvent, data: DataType) => {
         if (eventType == FormCrudEvent.create) {
           await getListOptions();
-          if(props.multiple) {
-            if(modelValue.value===undefined) modelValue.value=[data._id]
-            else if(Array.isArray(modelValue.value))
-                modelValue.value.push(data._id);
-
-
-          }
-          else modelValue.value = data._id;
+          if (props.multiple) {
+            if (modelValue.value === undefined) modelValue.value = [data._id];
+            else if (Array.isArray(modelValue.value))
+              modelValue.value.push(data._id);
+          } else modelValue.value = data._id;
+          refreshDocumentList(props.documentName);
           emits("change", data._id, getItem(data._id));
         }
       },

package/templates/nuxt/components/session/SessionBlock.vue.eta

@@ -1,55 +1,53 @@
 <template>
-
-  <Dialog  v-model:visible="showDialog" modal :pt="{root:{class:'w-1/3'}}"
-    :header="t('sessionExpire')">          
-        <div>
-          {{ t('reloginMessage') }}
-        </div>
-        <div class="text-right">
-          <Button @click="relogin" class="btn-primary">
-            {{ t('login') }}
-          </Button>
-        </div>
-        
-      
-      </Dialog>
-  
-  
-    
-      
-  </template>
-  <script lang="ts" setup>
-  /**
+  <Dialog
+    v-model:visible="showDialog"
+    modal
+    :pt="{ root: { class: 'w-1/3' } }"
+    :header="t('sessionExpire')"
+  >
+    <div>
+      {{ t("reloginMessage") }}
+    </div>
+    <div class="text-right">
+      <Button @click="relogin" class="btn-primary">
+        {{ t("login") }}
+      </Button>
+    </div>
+  </Dialog>
+</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
  */
-  import {PROFILEApi} from '~/simpleapp/generate/openapi'
-  const showDialog = ref(false)
-  const tabvisible = ref('')
-  
-  
-  addEventListener("visibilitychange", async (event) => {
-    tabvisible.value = document.visibilityState  
-    
-    if(document.visibilityState  ==='visible'){
-      //focus tab, try session still active?    
-      const result = await getApiSession()    
-      if(result){
-        showDialog.value=false
-      }else{
-        showDialog.value=true
+import { PROFILEApi } from "~/simpleapp/generate/openapi";
+const showDialog = ref(false);
+const tabvisible = ref("");
+
+addEventListener("visibilitychange", async (event) => {
+  tabvisible.value = document.visibilityState;
+
+  if (document.visibilityState === "visible") {
+    //focus tab, try session still active?
+    try{
+      const result = await getApiSession();
+      console.log("get sessionresult ",result)
+      if (result) {
+
+        showDialog.value = false;
+      } else {
+        showDialog.value = true;
       }
+    }catch(e){
+       showDialog.value = true;
     }
-  });
-  
-  
-  const relogin= ()=>{
-      window.open(useRuntimeConfig().public.APP_URL+'/relogin')
+    
   }
-  
-  
-  
-  
-  </script>
+});
+
+const relogin = () => {
+  window.open(useRuntimeConfig().public.APP_URL + "/relogin");
+};
+</script>

package/templates/nuxt/components/simpleApp/SimpleAppAutocomplete.vue.eta

@@ -1,35 +1,37 @@
 <template>
   <div
     v-if="readonly"
-    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
+    class="p-2 border rounded-lg border-gray-300 dark:border-blue-900/40"
   >
     <button
       :readonly="readonly"
       class="cursor-pointer text-primary-600 dark:text-primary-400"
       tabindex="0"
       @click="openViewer(true)"
-      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</button
     >
+      {{ modelValue && modelValue.label ? modelValue.label : "-" }}
+    </button>
   </div>
   <div
     v-else-if="modelValue !== undefined"
-    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 relative"
+    class="p-2 border rounded-lg border-gray-300 dark:border-blue-900/40 relative"
   >
     <button
       ref="autocompleteinput"
       readonly
       class="cursor-pointer text-primary-600 dark:text-primary-400"
-      
       @click="openViewer(true)"
-      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</button>
+    >
+      {{ modelValue && modelValue.label ? modelValue.label : "-" }}
+    </button>
 
     <div
       class="absolute h-full top-0 right-0 text-right text-white z-10 align-middle p-3"
     >
       <button
         class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
-        @click="clear" tabindex="0"
-
+        @click="clear"
+        tabindex="0"
       ></button>
     </div>
   </div>
@@ -47,7 +49,7 @@
     <AutoComplete
       v-if="!isMobile()"
       class="w-full"
-      v-model="modelValue"
+      v-model="autocompleteitem"
       ref="autocompleteinput"
       forceSelection
       optionLabel="label"
@@ -70,9 +72,15 @@
     >
       <template #header>
         <slot name="header">
-          <div class="flex flex-row font font-bold dark:text-white">
-            <div class="w w-1/3">{{ t(codefield) ?? t("code") }}</div>
-            <div class="w w-2/3">{{ t(labelfield) ?? t("label") }}</div>
+          <div
+            class="flex flex-row font font-semibold text-sm dark:text-white gap-2 p-2"
+          >
+            <div class="w w-1/3 line-clamp-1">
+              {{ t(codefield) ?? t("code") }}
+            </div>
+            <div class="w w-2/3 line-clamp-1">
+              {{ t(labelfield) ?? t("label") }}
+            </div>
           </div>
         </slot>
       </template>
@@ -81,9 +89,9 @@
       </template>
       <template #option="{ index, option }">
         <slot name="option" :index="index" :option="option">
-          <div class="flex flex-row dark:text-white">
-            <div class="w w-1/3">{{ option.code }}</div>
-            <div class="w w-2/3">{{ option.label }}</div>
+          <div class="flex flex-row dark:text-white text-sm gap-2">
+            <div class="w w-1/3 line-clamp-1">{{ option.code }}</div>
+            <div class="w w-2/3 line-clamp-1">{{ option.label }}</div>
           </div>
         </slot>
       </template>
@@ -202,6 +210,7 @@ const props = withDefaults(
     showNull: true,
   },
 );
+
 const mobileListMode = ref("list");
 const defaultFilterValue = ref("");
 const path = "$" + props.setting.instancepath;
@@ -324,7 +333,7 @@ const setFocus = (ev: any) => {
 const openViewer = (readonly: boolean) => {
   if (remotedoc) {
     $event("ViewRecord", {
-      _id: modelValue.value?._id as string,
+      _id: (modelValue.value?._id ?? '' )as string,
       eventId: randomUUID(),
       label: (readonly
         ? modelValue.value?.label

package/templates/nuxt/components/simpleApp/SimpleAppCalendarInput.vue.eta

@@ -0,0 +1,64 @@
+<template>
+  <Calendar
+    :pt="pt"
+    :inputId="uuid"
+    :path="setting.instancepath"      
+    v-model="datetimevalue"
+    @update:modelValue="updateDateTime"      
+    showButtonBar
+    :readonly="readonly"
+    :placeholder="placeholder"     
+    :showTime="showtime"
+    :timeOnly="timeOnly"
+    hourFormat="12"
+    v-bind="componentProps as CalendarProps"
+  />    
+</template>
+<script setup lang="ts">
+// :date-format="getDateFormat()"
+import { CalendarProps } from 'primevue/calendar';
+const props =defineProps<{
+ pt:any 
+ uuid:string
+ placeholder?:string
+ setting: any;
+ readonly?: boolean;
+ componentProps?:CalendarProps
+ type: "date"|"time"|"datetime"
+}>()
+
+
+const emits = defineEmits(['change'])
+const showtime = props.type == 'date'? false : true
+const timeOnly = props.type=='time'?true:false
+const modelValue = defineModel<string>({ required: true });
+const datetimevalue = ref<Date>();
+
+
+const refreshFromParent = ()=>{
+if(modelValue.value === undefined || modelValue.value=='')
+datetimevalue.value = undefined
+else if(props.type=='time')
+datetimevalue.value = stringToDate(('2000-01-01 '+modelValue.value??'00:00:00'))
+else if(props.type=='date')
+datetimevalue.value = stringToDate((modelValue.value)+'T00:00:00')
+else
+datetimevalue.value = stringToDate(modelValue.value)
+}
+
+watch(modelValue, () => refreshFromParent())
+
+const updateDateTime = (value: any) => {
+if (!value) modelValue.value = "";
+else if(props.type=='datetime')modelValue.value = dateToISOString(value)
+else if(props.type=='date')modelValue.value = dateToString(value)
+else if(props.type=='time') modelValue.value = dateToTimeString(value)
+
+  
+
+emits('change');
+};
+
+
+refreshFromParent()
+</script>

package/templates/nuxt/components/simpleApp/SimpleAppChildrenList.vue.eta

@@ -22,14 +22,15 @@
       </slot>
     </ListView>
 
-    <Dialog v-model:visible="showDialog" modal :header="t('editDetails')">
+    <Dialog v-model:visible="showDialog"
+       modal :header="t('editDetails')" :pt="{root:{class:'w-1/2'}}">
       <div class="flex flex-col p-2 gap-4">
         <slot name="popupbody" :index="rowIndex" :item="list[rowIndex]">
           row {{ rowIndex }} define SimpleAppInputs here
         </slot>
       </div>
       <template #footer>
-        <div v-if="!readOnly" class="flex flex-row gap-2 w-full">
+        <div v-if="!readonly" class="flex flex-row gap-2 w-full">
           <ButtonDanger @click="deleteItem">{{ t("delete") }}</ButtonDanger>
           <ButtonPrimary @click="updateItem">{{ t("ok") }}</ButtonPrimary>
         </div>
@@ -38,6 +39,7 @@
   </div>
 </template>
 <script setup lang="ts" generic="T extends { [key: string]: any }">
+import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
@@ -46,13 +48,20 @@
  */
 const showDialog = ref(false);
 const rowIndex = ref(0);
+
 const emits = defineEmits(["addrow", "deleteitem", "itemupdated"]);
-const props = defineProps<{ 
-  list: T[]; 
-  title?: string; 
-  addNew?: boolean 
+const props = defineProps<{
+  list: T[];
+  title?: string;
+  addNew?: boolean;
+  readonly?: boolean;
+  doc: SimpleAppClient<any, any>;
 }>();
-
+const readonly = computed(() => {
+  if (props.readonly) return true;
+  else if (props.doc.isReadOnly()) return true;
+  else return false;
+});
 const showRow = (index: number, item: T) => {
   showDialog.value = true;
   rowIndex.value = index;
@@ -70,6 +79,5 @@ const addRow = (event: MouseEvent) => {
   emits("addrow", MouseEvent);
   const lineno = props.list.length - 1;
   showRow(lineno, props.list[lineno]);
-  
 };
 </script>

package/templates/nuxt/components/simpleApp/SimpleAppDocumentNo.vue.eta

@@ -9,28 +9,28 @@
       :class="
         !pt
           ? 'flex-1 w-full rounded-lg  ' +
-            (props.readonly ? '' : 'rounded-tr-none rounded-br-none')
+            (props.readonly || !props.setting.document.isNew() ? '' : 'rounded-tr-none rounded-br-none')
           : ''
       "
     />
-    <span class="" v-if="!readonly">
-      <button v-ripple
+    <span class="" v-if="!readonly && props.setting.document.isNew()">
+      <button
+        v-ripple
         type="button"
         @click="toggle"
         tabindex="-1"
-        class="'btn btn-primary p-3 dark:border-blue-900/40 rounded-lg rounded-tl-none rounded-bl-none"
+        class="'btn bg-primary-500 dark:text-black text-white p-3 dark:border-blue-900/40 rounded-lg rounded-tl-none rounded-bl-none"
       >
         <i class="pi pi-angle-down"></i>
       </button>
-      <OverlayPanel ref="op" class="p-4">
+      <OverlayPanel ref="op">
         <div class="m-4">
           <ul>
             <li v-for="docno in docFormatlist" class="hover-list-primary p-2">
-              <a class="" @click="chooseFormat(docno)">
-                <span class="pi pi-hashtag mr-2"></span>
+              <div class="flex flex-row gap-2 cursor-pointer" @click="chooseFormat(docno)">                
                 <span class="">{{ docno.docNoFormatName }}</span>
                 <span class="text text-green-600">{{ docno.sample }}</span>
-              </a>
+              </div>
             </li>
           </ul>
         </div>

package/templates/nuxt/components/simpleApp/SimpleAppFieldContainer.vue.eta

@@ -75,7 +75,7 @@ let schema: any;
 const getLayoutClass = () =>
   `simpleapp-input-container flex  ${
     props.inputType == "checkbox"
-      ? " flex-row gap-4 mt-1 ml-1 "
+      ? " flex flex-col "
       : "flex flex-col "
   }`;