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

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,7 +1,43 @@
 <template>
-  <div v-if="!readonly" class="relative">
+  <div
+    v-if="readonly"
+    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>
+  </div>
+  <div
+    v-else-if="modelValue !== undefined"
+    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>
+
     <div
-      class="absolute h-full top-0 right-10 text-right dark:text-white z-10 align-middle p-3"
+      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"
+      ></button>
+    </div>
+  </div>
+  <div v-else class="relative">
+    <div
+      class="absolute h-full top-0 right-10 text-right text-white z-10 align-middle p-3"
       v-if="modelValue?._id"
     >
       <span
@@ -13,7 +49,7 @@
     <AutoComplete
       v-if="!isMobile()"
       class="w-full"
-      v-model="modelValue"
+      v-model="autocompleteitem"
       ref="autocompleteinput"
       forceSelection
       optionLabel="label"
@@ -24,20 +60,27 @@
       :dropdown="true"
       @clear="clear"
       :dropdown-mode="'current'"
+      :readonly="readonly"
       :pt="pt"
       :delay="500"
       :disabled="readonly"
+      @click="clickAutocomplete"
       :suggestions="list"
       @blur="onBlurAutocomplete"
       :inputId="inputId"
       :path="setting.instancepath"
-      :readonly="readonly"
     >
       <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>
@@ -46,9 +89,9 @@
       </template>
       <template #option="{ index, option }">
         <slot name="option" :index="index" :option="option">
-          <div class="flex flex-row 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>
@@ -91,7 +134,7 @@
             <i class="pi pi-plus"></i>
             </ButtonText>  -->
             </template>
-          </mobile-toolbar>          
+          </mobile-toolbar>
           <ListView
             :list="list"
             :withFilter="true"
@@ -124,18 +167,6 @@
       </OverlaySideBarCrud>
     </div>
   </div>
-  <div
-    v-else
-    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
-  >
-    <span
-      :readonly="readonly"
-      class="cursor-pointer text-primary-600 dark:text-primary-400"
-      tabindex="0"
-      @click="openViewer(true)"
-      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</span
-    >
-  </div>
 </template>
 <script setup lang="ts">
 /**
@@ -179,6 +210,7 @@ const props = withDefaults(
     showNull: true,
   },
 );
+
 const mobileListMode = ref("list");
 const defaultFilterValue = ref("");
 const path = "$" + props.setting.instancepath;
@@ -301,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
@@ -368,4 +400,9 @@ const afterRenderMobileForm = async (
     mobileVisible.value = false;
   }
 };
+
+const clickAutocomplete = (a, b) => {
+  console.log("clickAutocomplete", a, b);
+  return false;
+};
 </script>

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

@@ -1,16 +1,15 @@
 <template>
   <div class="flex flex-col">
     <div class="flex flex-row gap-2">
-      
-        <TextTitle v-if="title" class="flex-1">{{ title }}</TextTitle>
-      
-        <div class="flex flex-row"><slot name="buttons"></slot></div>
-      
-        <div>
-          <ButtonDefault v-if="!readOnly" @click="addRow">
-            <i class="pi pi-plus"></i>
-          </ButtonDefault>
-        </div>
+      <TextTitle v-if="title" class="flex-1">{{ title }}</TextTitle>
+
+      <div class="flex flex-row"><slot name="buttons"></slot></div>
+
+      <div>
+        <ButtonDefault v-if="addNew" @click="addRow">
+          <i class="pi pi-plus"></i>
+        </ButtonDefault>
+      </div>
     </div>
     <ListView
       class="p-2 dark:bg-slate-900 bg-slate-200 rounded-lg"
@@ -23,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>
@@ -39,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
@@ -47,9 +48,20 @@
  */
 const showDialog = ref(false);
 const rowIndex = ref(0);
-const emits = defineEmits(["addrow", "deleteitem", "itemupdated"]);
-const props = defineProps<{ list: T[]; title?: string; readOnly?: boolean }>();
 
+const emits = defineEmits(["addrow", "deleteitem", "itemupdated"]);
+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;

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 "
   }`;