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

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex flex-row text-xs cursor-pointer" 
+    v-if="data?.updated && data?.updated !=''" @click="viewHistories">    
+    <ImageAvatar v-if="data?.updatedBy" :id="data.updatedBy" :size="12"></ImageAvatar>
+    <div class="flex flex-col p-2">
+      <TextDocStatus v-if="data?.docStatus" :docStatus="data?.docStatus" />
+      <TextSubsubtitle class=" text-gray-400 italic">{{ t('updated') }}:</TextSubsubtitle>
+      <RendererDateTime :value="data?.updated" class="text-gray-400 italic"/>
+    </div>
+    
+
+    <Dialog v-model:visible="visibleHistories" modal
+      :header="t('histories')" :pt="{root:{class:'w-1/4'}}">
+      <Timeline :value="events" class="w-full md:w-20rem">
+        <template #opposite="slotProps">
+          <RendererDateTime class="italic text-gray-400 text-xs" :value="slotProps.item.date"/>
+        </template>
+        <template #content="slotProps">
+          <div>
+            <div>{{ slotProps.item.status }}</div>
+          </div>  
+          
+        </template>
+    </Timeline>
+    </Dialog>
+  </div>
+  
+</template>
+<script lang="ts" setup>
+import TextSubsubtitle from '../text/TextSubsubtitle.vue';
+import RendererDateTime from './RendererDateTime.vue';
+  const visibleHistories = ref(false)
+  const props=defineProps<{data:any}>()
+  const events = computed(()=>{
+    const list =  [{ status: t('created'), date: props.data.created },]
+
+    if(props.data.updated != props.data.created){
+      list.push({ status: t('paidFeature'), date:''})
+      list.push( { status:  t('lastUpdate'), date: props.data.updated })
+    }     
+    return list   
+  })
+  const severity = computed(()=>{
+    const stat = props.data.docStatus 
+    if(props.data.docStatus=='confirm') return "success"
+    else if(props.data.docStatus=='void') return "danger"
+    else if(props.data.docStatus=='draft') return "secondary"
+    else return "warning"
+  })
+
+
+  const viewHistories = () =>{
+    visibleHistories.value=true
+    console.log("histories")
+  }
+</script>

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

@@ -21,25 +21,31 @@ import { ForeignKey, FormCrudEvent, SimpleAppDocumentType } from "~/types";
 
 type SettingProp = { collection: SimpleAppDocumentType; displayField?: string };
 const modelValue = defineModel<ForeignKey>();
+
 const emits = defineEmits(["after"]);
-const props = defineProps<{ setting: SettingProp }>();
+const props = defineProps<{ value?: ForeignKey; 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;
+  if (!modelValue.value && !props.value) return undefined;
+  else if (!s.collection) return modelValue.value ?? props.value;
+  else if (s.displayField) {
+    if(modelValue.value) return modelValue.value[s.displayField]
+    else if (props.value) props.value[s.displayField];
+    else return ''
+  }
+    
+  else return modelValue.value?.label ?? props.value?.label;
 });
 const { $event } = useNuxtApp();
 const viewer = ref();
 const viewRecord = () => {
   viewer.value = getDocument(props.setting.collection)?.viewer;
-
+  const value = modelValue.value ?? props.value;
   // 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,
+    _id: value?._id as string,
+    label: value?.label as string,
     eventId: randomUUID(),
     documentName: props.setting.collection,
     viewer: viewer.value,

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

@@ -1,7 +1,10 @@
 <template>
-  <a @click="go" class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer">
+  <a
+    @click="go"
+    class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer"
+  >
     <slot name="default">
-      <div>{{ value[fields[0]] }}</div>
+      <div>{{ value[fields[0]] ?? t('undefined') }}</div>
     </slot>
   </a>
 </template>
@@ -20,6 +23,6 @@ const props = defineProps<{
 }>();
 
 const go = () => {
-  goTo(props.setting.path, props.value._id);  
+  goTo(props.setting.path, props.value._id);
 };
-</script>
+</script>

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

@@ -1,11 +1,15 @@
 <template>
-  <span v-if="typeof modelValue == 'undefined' || typeof modelValue == 'string'"
-    >-</span
-  >
-  <span v-else-if="showCurrency"> {{ currenyValue }}</span>
-  <span v-else>
-    {{ modelValue.toLocaleString(useI18n().defaultLocale, options) }}</span
-  >
+  
+  <span>
+    <span class="mr-1" v-if="showCurrency">{{ getCurrency() }}</span>    
+    <span v-if="typeof modelValue != 'undefined'">{{
+    modelValue.toLocaleString(useI18n().defaultLocale, options)
+      }}</span>
+    <span v-else-if="typeof props.value != 'undefined'">{{
+      props.value.toLocaleString(useI18n().defaultLocale, options)
+      }}</span>
+    <span v-else>-</span>
+  </span>
 </template>
 <script lang="ts" setup>
 /**
@@ -14,20 +18,24 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const currenyValue = computed(() => {
-  if (modelValue.value === undefined) return "-";
-  return Intl.NumberFormat(useI18n().defaultLocale, {
-    // style: "currency",
-    // currency: getUserProfile()?.currency ?? '',
-    // currencyDisplay: "symbol",
-  }).format(modelValue.value);
-});
 const options = {
   style: "decimal", // Other options: 'currency', 'percent', etc.
   minimumFractionDigits: 2,
   maximumFractionDigits: 2,
 };
-const modelValue = defineModel<number>({ required: true });
-const props = defineProps<{ showCurrency?: boolean }>();
+const modelValue = defineModel<number>();
+const props = defineProps<{ showCurrency?: boolean ; value?:number }>();
+
+const currenyValue = computed(() => {
+  if (typeof modelValue.value == 'number'){
+    return Intl.NumberFormat(useI18n().defaultLocale, 
+        {}).format(modelValue.value);
+  }else if(typeof props.value == 'number'){
+    return Intl.NumberFormat(useI18n().defaultLocale,{}).format(props.value);
+  }else return '-'
+  
+  
+});
+
 
 </script>

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

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCTime(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToTimeStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToTimeStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -10,4 +15,5 @@
  * author: Ks Tan
  */
 const modelValue = defineModel<Date | string>();
+const props = defineProps<{ value: Date | string }>();
 </script>

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

@@ -1,12 +1,17 @@
 <template>
-  <a
+  <div v-if="!value"></div>
+  <a v-else
     @click="openViewer"
     class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer"
   >
     <slot name="default">
-      <div v-if="fields">{{ value[fields[0]] }}</div>
+      
+      <TextDanger v-if="!value">{{t('undefined')}}</TextDanger>
+      <TextDanger v-else-if="!Array.isArray(fields) || !fields[0]">{{t('undefinedFields')}}</TextDanger>
+      <div v-else-if="value[fields[0]]">{{ value[fields[0]] }}</div>
+      <div v-else></div>
     </slot>
-  </a>
+  </a> 
 </template>
 <script setup lang="ts">
 /**
@@ -21,18 +26,23 @@ const props = defineProps<{
   setting: RendererSetting;
   value: any;
 }>();
-
+const viewervalue = computed(()=>{
+  return props.value ?? {}
+})
 const openViewer = () => {
   useNuxtApp().$event("ViewRecord", {
     _id: props.value._id,
     documentName: props.setting.documentName,
     viewer: getDocument(props.setting.documentName)?.viewer,
-    label: props.fields !== undefined ? props.value[props.fields[0]] : props.setting.documentName,
+    label:
+      props.fields !== undefined
+        ? props.value[props.fields[0]]
+        : props.setting.documentName,
     document: getDocument(props.setting.documentName)?.docClass,
-    eventId: randomUUID(),    
-    after:()=>{
-      useNuxtApp().$event('CloseDialog',props.setting.documentName)
-    }
+    eventId: randomUUID(),
+    after: () => {
+      useNuxtApp().$event("CloseDialog", props.setting.documentName);
+    },
   });
 };
 </script>

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,44 @@
       :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 +71,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;
@@ -58,7 +85,7 @@ const props = defineProps<{
 }>();
 // const initvalue = props.multiple==true ? [] : ''
 const modelValue = defineModel<string | string[]>();
-
+const allowAddNew = computed(()=> props.allowAddNew && canPerform(props.documentName,'create'))
 const list = ref<ForeignKey[]>([]);
 const fieldid = randomUUID();
 
@@ -66,6 +93,7 @@ const options = ref<
   {
     value: string;
     label: string;
+    more: any;
   }[]
 >([]);
 const getListOptions = async () => {
@@ -79,38 +107,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;
@@ -276,7 +285,7 @@ const getListFromAutocompleteApi = (event: any) => {
       console.log("Run autocomplete?");
       list.value = res.data;
 
-      if (props.allowAddNew) {
+      if (props.allowAddNew && canPerform(upperFirst(targetDocument),'create')) {
         list.value = list.value.concat({
           _id: "new",
           label: "<" + t("new") + ">",
@@ -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,60 @@
+<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>