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

package/templates/nuxt/components/simpleApp/SimpleAppFormToolBar.vue._eta

@@ -35,15 +35,15 @@
     </MobileToolbar>
   </div>
   <div v-else class="simpleapp-tool-bar">
-   <!--  <div class="flex flex-row justify-end p-2">
+    <!--  <div class="flex flex-row justify-end p-2">
       <TextTitle class="dark:text-white line-clamp-2 flex-1">{{
         title
       }}</TextTitle>
       <ButtonText @click="callClose"><i class="pi pi-times" /></ButtonText>
     </div> -->
-    <div class="flex flex-row gap-2 p-0 justify-between">
+    <div class="flex flex-row gap-2 mb-2 p-0 justify-between">
       <!-- left -->
-      <div class="flex flex-row">
+      <div class="flex flex-row gap-2">
         <div v-for="(menu, index) in menus" :key="index">
           <div v-if="menu.label && menu.type == 'crud'">
             <ButtonAction
@@ -56,9 +56,13 @@
       </div>
 
       <!-- center -->
-      <div class="flex flex-row "></div>
+      <div class="flex flex-row"></div>
       <!-- right -->
-      <div class="flex flex-row">
+      <div class="flex flex-row gap-2">
+        <DebugDocumentData v-model="data" :label="t(doc.getDocName())" />
+        <div v-if="data.documentStatus">
+          <RendererDocHistories :data="data" />
+        </div>
         <div v-for="(menu, index) in menus" :key="index">
           <div v-if="menu.label && menu.type == 'docstatus'">
             <ButtonAction
@@ -72,7 +76,7 @@
     </div>
     <ConfirmPopup></ConfirmPopup>
   </div>
-  <Dialog v-model:visible="visiblePrintFormats" :header="t('printFormats')">
+  <!-- <Dialog v-model:visible="visiblePrintFormats" :header="t('printFormats')">
     <div>
       <ListView
         :list="printformats"
@@ -85,7 +89,7 @@
         </div>
       </ListView>
     </div>
-  </Dialog>
+  </Dialog> -->
   <OverlayPanelWithToolBar
     v-if="visiblePrintPreview"
     v-model="visiblePrintPreview"
@@ -96,11 +100,23 @@
         ><i class="pi pi-times"
       /></ButtonText>
     </template>
-    <template #headerCenter>{{ t("printPreview") }}</template>
+    <template #headerCenter>
+      <div class="flex flex-row gap-2 justify-center">
+        <Dropdown
+          :options="printformats"
+          option-label="formatName"
+          option-value="formatId"
+          v-model="currentprintformat"
+          @change="printPdf"
+        ></Dropdown>
+        <ButtonPrimary @click="showPrintFormats"
+          ><i class="pi pi-refresh"
+        /></ButtonPrimary>
+      </div>
+    </template>
     <template #headerRight>
-
       <div v-if="isMobile()">
-        <ButtonText class="text-xl" @click="sendToPrint" >
+        <ButtonText class="text-xl" @click="sendToPrint">
           <i class="pi pi-print"></i>
         </ButtonText>
         <ButtonText class="text-xl" v-if="sharable" @click="togglePdfMenu">
@@ -111,6 +127,14 @@
     </template>
     <!-- :header="t('printPreview')"
     position="bottom" -->
+    <!-- {{pdfReady}} -->
+
+    <!-- <div v-if="!pdfReady">
+      <div class="flex flex-col justify-center">
+        <div class="pi pi-spin pi-spinner" style="font-size: 8rem"></div>
+        <div>{{ t("loading") + "..." }}</div>
+      </div>
+    </div>     -->
     <TextDanger v-if="printservererror || !printstr">
       {{ t("printServerError") }}
     </TextDanger>
@@ -142,9 +166,16 @@ import VuePdfEmbed from "vue-pdf-embed";
 
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
 import { useConfirm } from "primevue/useconfirm";
-import { FormActions, FormCrudEvent, FormMenu } from "~/types";
+import {
+  FormActions,
+  FormCrudEvent,
+  FormMenu,
+  SchemaPrintFormat,
+} from "~/types";
+import { DropdownChangeEvent } from "primevue/dropdown";
 import { MenuItem } from "primevue/menuitem";
 import { MenuItemCommandEvent } from "primevue/menuitem";
+const currentprintformat = ref();
 const pdfrenderer = ref();
 const confirm = useConfirm();
 const emits = defineEmits(["on", "close"]);
@@ -152,13 +183,17 @@ const visiblePrintFormats = ref(false);
 const visiblePrintPreview = ref(false);
 const printstr = ref();
 const printservererror = ref(false);
+const pdfReady = ref(false);
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   disableaction?: string[];
 }>();
+const doc = props.document;
+const data = doc.getReactiveData();
 
 const createData = async () => {
   try {
+    setRecentDocument(data.value._id,{docName:doc.getDocName(),label:title.value})
     return await doc.create();
   } catch (e) {
     console.debug("validation error:", e);
@@ -166,6 +201,7 @@ const createData = async () => {
 };
 const updateData = async () => {
   try {
+    setRecentDocument(data.value._id,{docName:doc.getDocName(),label:title.value})
     return await doc.update();
   } catch (e) {
     console.debug("validation error:", e);
@@ -173,14 +209,13 @@ const updateData = async () => {
 };
 const deleteData = async () => {
   try {
+    getRecently().delete(data.value._id)
     return await doc.delete();
   } catch (e) {
     console.debug("validation error:", e);
   }
 };
 
-const doc = props.document;
-const data = doc.getReactiveData();
 type Datatype = keyof typeof data.value;
 const config = doc.getSchema()["x-simpleapp-config"];
 const titlefield = (config.documentTitle ?? config.uniqueKey) as Datatype;
@@ -214,26 +249,36 @@ const emitMobileEvent = (itemevent: MenuItemCommandEvent) => {
   emitEvent(itemevent.item, event);
 };
 
-const printPdf = async (index: number, format: any) => {
-  console.log("printPdf");
+const printPdf = async (dropdown?: DropdownChangeEvent) => {
+  let index = 0;
+
+  if (printformats && printformats.length > 0 && dropdown !== undefined) {
+    index = printformats?.findIndex((item) => item.formatId == dropdown.value);
+  }
+  let format: SchemaPrintFormat = printformats[index];
   printservererror.value = false;
   const formatid: string = format.formatId;
+  currentprintformat.value = formatid;
   visiblePrintPreview.value = true;
   // console.log("formatidformatid", format);
+  // pdfReady.value=false
   try {
     const tmp: any = await doc
       .getApi()
       .runPrint(data.value._id ?? "", formatid);
+    // pdfReady.value=true
     printstr.value = "data:application/pdf;base64," + tmp.data;
   } catch (e) {
+    pdfReady.value = true;
     printservererror.value = true;
-    printstr.value = "";
+    // printstr.value = "";
     console.error("error from print server", e);
   }
 };
 const getActions = () => {
   const actions = doc.getActions();
-  const printformats = doc.getSchema()["x-simpleapp-config"]?.printFormats;
+  // const printformats = doc.getSchema()["x-simpleapp-config"]?.printFormats;
+
   const crudmenus: any[] = [];
 
   // Object.keys(actions).forEach((key)=>{ //crud, api, docstatus
@@ -259,15 +304,14 @@ const getActions = () => {
       command: showPrintFormats,
     });
   }
-  console.log("crudmenus", crudmenus);
+  // console.log("crudmenus", crudmenus);
 
   // })
   return crudmenus;
 };
 
-const showPrintFormats = () => {
-  visiblePrintFormats.value = true;
-  // console.log("showPrintFormatContext",itemEvent)
+const showPrintFormats = async () => {
+  await printPdf();
 };
 const emitEvent = async (menu: FormMenu, clickEvent: Event | MouseEvent) => {
   if (menu.action == "delete") {
@@ -321,7 +365,7 @@ const getDocActions = () => {
 const showMenuButton = (menu: FormMenu) => {
   if (menu.separator) return true;
 
-  if (menu.action == "print") return true;
+  if (menu.action == "print" && !doc.isNew()) return true;
   //all document status cannot direct apply regardless new or draft
   if (menu.type == "docstatus") return true;
 

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

@@ -34,71 +34,51 @@
       v-bind="componentProps as InputSwitchProps"
       @change="onChange"
     />
-    <!--
-    <InputText
-      type="date"
-      :pt="pt"
-      v-else-if="inputType == SimpleAppInputType.date"
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="datevalue"
-      @update:modelValue="updateDate"
-      :readonly="isReadonly"
-      :placeholder="placeholder"
-      v-bind="componentProps as InputTextProps"
-    /> -->
+    
     <!-- calendar component -->
-    <Calendar
-      type="date"
-      :pt="pt"
+    <SimpleAppCalendarInput 
       v-else-if="
         SimpleAppInputType.calendar == inputType ||
         inputType == SimpleAppInputType.date
       "
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="datevalue"
-      @update:modelValue="updateDate"
-      :touchUI="isMobile()"
-      showButtonBar
-      :readonly="isReadonly"
+      :pt="pt"
+      type="date"
+      v-model="modelValue"      
+      :uuid="slotprops.uuid"
       :placeholder="placeholder"
-      :date-format="getDateFormat()"
-      v-bind="componentProps as CalendarProps"
-    />
-
+      :setting="setting"
+      :readonly="isReadonly"
+      :componentProps="componentProps"
+      @change="onChange"
+      />
+    
     <!-- time component -->
-    <Calendar
-      :pt="pt"
+    <SimpleAppCalendarInput 
       v-else-if="inputType == SimpleAppInputType.time"
-      timeOnly
-      showTime
-      hourFormat="12"
-      @update:modelValue="updateTime"
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="timevalue"
-      :readonly="isReadonly"
-      :placeholder="placeholder"
-      v-bind="componentProps as CalendarProps"
-    />
-
-    <Calendar
       :pt="pt"
-      v-else-if="inputType == SimpleAppInputType.datetime"
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="datetimevalue"
-      @update:modelValue="updateDateTime"
-      :touchUI="isMobile()"
-      showButtonBar
+      type="time"
+      v-model="modelValue"      
+      :uuid="slotprops.uuid"
+      :placeholder="placeholder"
+      :setting="setting"
       :readonly="isReadonly"
+      :componentProps="componentProps"
+      @change="onChange"
+      />
+    
+    <SimpleAppCalendarInput 
+      v-else-if="inputType == SimpleAppInputType.datetime"
+      :pt="pt"
+      type="datetime"
+      v-model="modelValue"      
+      :uuid="slotprops.uuid"
       :placeholder="placeholder"
-      :date-format="getDateFormat()"
-      showTime
-      hourFormat="12"
-      v-bind="componentProps as CalendarProps"
-    />
+      :setting="setting"
+      :readonly="isReadonly"
+      :componentProps="componentProps"
+      @change="onChange"
+      />
+    
     <!-- select/list component -->
     <Listbox
       v-model="modelValue"
@@ -134,7 +114,6 @@
       @change="onChange"
     />
 
-
     <MultiSelect
       v-model="modelValue"
       :pt="pt"
@@ -168,6 +147,31 @@
       </div>
     </div>
 
+    <SimpleAppUserPicker
+      v-else-if="inputType == SimpleAppInputType.user"
+      v-model="modelValue as autocompletetype"
+      :hidelabel="hidelabel"
+      :pt="pt"
+      :setting="setting"
+      :disabled="isReadonly"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+      :autocompleteFilter="autocompleteFilter"
+      @change="onChange"
+    >
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <template #content>
+        <slot name="content"></slot>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option"></slot>
+      </template>
+    </SimpleAppUserPicker>
+
     <!-- autocomplete, need do more enterprise grade component-->
     <SimpleAppAutocomplete
       v-else-if="inputType == SimpleAppInputType.autocomplete"
@@ -182,7 +186,17 @@
       :placeholder="placeholder"
       :autocompleteFilter="autocompleteFilter"
       @change="onChange"
-    />
+    >
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <template #content>
+        <slot name="content"></slot>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option"></slot>
+      </template>
+    </SimpleAppAutocomplete>
     <!-- v-bind:attributes="componentProps" -->
     <!--  document no input-->
     <SimpleAppDocumentNo
@@ -265,6 +279,8 @@
       @focus="setFocus"
       :max-fraction-digits="2"
       :min-fraction-digits="2"
+      mode="currency" 
+      :currency="getCurrency()"
       :readonly="isReadonly"
       :pt="pt"
       :class="!pt ? 'w-full flex flex-col' : ''"
@@ -340,10 +356,8 @@ const resetcount = ref(0);
 const instancepath = ref("");
 const modelValue = defineModel({ required: true });
 
-const datevalue = ref<Date>();
-const datetimevalue = ref<Date>();
-const timevalue = ref<Date>();
-let watchOnChange = 0;
+
+const watchOnChange = ref(false);
 const props = withDefaults(
   defineProps<{
     inputType: SimpleAppInputType;
@@ -353,6 +367,7 @@ const props = withDefaults(
     setting: any;
     type?: string;
     instancepath?: string;
+    options?: string[];
     hidelabel?: boolean;
     readonly?: boolean;
     autofocus?: boolean;
@@ -373,26 +388,6 @@ const props = withDefaults(
 
 const pt = ref(props.pt);
 
-if (props.inputType == SimpleAppInputType.date && modelValue.value) {
-  datevalue.value = stringToDate(<string>modelValue.value); //.format("YYYY-MM-DD");
-} else {
-  datevalue.value = undefined;
-}
-if (props.inputType == SimpleAppInputType.datetime && modelValue.value) {
-  datetimevalue.value = stringToDate(<string>modelValue.value);
-} else {
-  datetimevalue.value = undefined;
-}
-
-if (props.inputType == SimpleAppInputType.time) {
-  if (modelValue.value) {
-    timevalue.value = stringToDate(
-      (today() + "T" + modelValue.value) as string,
-    ); //.format("YYYY-MM-DD");
-  } else {
-    timevalue.value = undefined;
-  }
-}
 
 if (props?.instancepath) instancepath.value = props.instancepath;
 else if (props.setting?.instancepath)
@@ -424,6 +419,8 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
   } else {
     pt.value = props.pt;
   }
+
+  watchOnChange.value = true;
 });
 const isReadonly = computed(() => {
   if (props.readonly) {
@@ -434,39 +431,19 @@ const isReadonly = computed(() => {
     return false;
   }
 });
-const updateTime = (value: Date) => {
-  value.setSeconds(0);
-  modelValue.value = dateToTimeString(value);
-  onChange();
-};
-const updateDate = (value: any) => {
-  if (value) {
-    modelValue.value = dateToString(value);
-  } else {
-    modelValue.value = "";
-  }
-  onChange();
-};
-const updateDateTime = (value: any) => {
-  if (value) {
-    modelValue.value = dateToISOString(value);
-  } else {
-    modelValue.value = "";
-  }
-  onChange();
-};
+
 
 const setFocus = (ev: any) => {
   if (!isMobile()) ev.target.select();
 };
 
 const getListOptions = () => {
-  const options = [];  
-  const enumlist = props.setting.fieldsetting.type == 'array' 
-      ? props.setting.fieldsetting.items.enum 
-      : props.setting.fieldsetting.enum 
-
-  
+  const options = [];
+  const enumlist =
+    props.options ??
+    (props.setting.fieldsetting.type == "array"
+      ? props.setting.fieldsetting.items.enum
+      : props.setting.fieldsetting.enum);
 
   if (enumlist) {
     for (let i = 0; i < enumlist.length; i++) {
@@ -487,69 +464,13 @@ const emits = defineEmits([
   "update:docNoFormat",
 ]);
 
-const getDateFormat = () => {
-  return getPrimevueCalendarDateFormat();
-};
-
-watch(modelValue, (newvalue: any) => {
-  if (
-    [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
-      props.inputType,
-    )
-  ) {
-    if (modelValue.value) {
-      datevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      timevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.datetime) {
-    if (modelValue.value) {
-      datetimevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      timevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.time) {
-    if (modelValue.value) {
-      timevalue.value = stringToDate(
-        (today() + "T" + modelValue.value) as string,
-      );
-    } else {
-      timevalue.value = undefined;
-    }
-  }
-});
-onMounted(() => {
-  if (
-    [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
-      props.inputType,
-    )
-  ) {
-    if (modelValue.value) {
-      datevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      datevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.datetime) {
-    if (modelValue.value) {
-      datetimevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      datetimevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.time) {
-    if (modelValue.value) {
-      timevalue.value = stringToDate(
-        (today() + "T" + modelValue.value) as string,
-      );
-    } else {
-      timevalue.value = undefined;
-    }
-  }
-});
 
 const onChange = () => {
-  pt.value = undefined;
-  resetcount.value++;
-  emits("change", modelValue.value);
+  if (props.setting.document.isReady()) {
+    pt.value = undefined;
+    resetcount.value++;
+    emits("change", modelValue.value);
+  }
 };
 
 /************ start autocomplete only ***************/

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

@@ -1,29 +1,35 @@
 <template>
-    <DataTable v-bind="$attrs" stripedRows resizableColumns
-     class="simpleapp-datatable p-datatable-sm" :value="modelValue">
-    <template #empty> <div class="text-center">No record found.</div> </template>
-    <template #header v-if="!setting.readonly  && !readonly">
-        <div  >        
-            <Button  icon="pi pi-plus" @click="addNew()" class="simpleapp-datatable-add btn-primary" type="button">Add</Button>
-        </div>
+  <DataTable
+    v-bind="$attrs"
+    stripedRows
+    resizableColumns
+    class="simpleapp-datatable p-datatable-sm"
+    :value="modelValue"
+  >
+    <template #empty>
+      <div class="text-center">No record found.</div>
+    </template>
+    <template #header v-if="!setting.readonly && !readonly">
+      <div class="flex flex-row gap-2">
+      <slot name="header">
+        <Button
+          icon="pi pi-plus"
+          @click="addNew()"
+          class="simpleapp-datatable-add btn-primary"
+          type="button"
+          >{{ t("add") }}</Button
+        >
+      </slot>
+    </div>
     </template>
     <slot>
-        
-            
-            <Column class="text-center" header="undefine columns">
-                <template #body>
-                    <div class="text-center">Missing {{ '<Column></Column>' }}</div>
-                </template>
-                
-            </Column> 
-      
-        
-            
-            
+      <Column class="text-center" header="undefine columns">
+        <template #body>
+          <div class="text-center">Missing {{ '<Column></Column>' }}</div>
+        </template>
+      </Column>
     </slot>
-            
-
-    </DataTable>
+  </DataTable>
 </template>
 <script setup lang="ts">
 /**
@@ -32,31 +38,28 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import {ref} from 'vue'
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
+import { ref } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
 
 const props = defineProps<{
-    // columns:InputTableColumn[],
-    setting:any,
-    getField:Function,    
-    readonly?:boolean
-}>()
-
+  // columns:InputTableColumn[],
+  setting: any;
+  getField: Function;
+  readonly?: boolean;
+}>();
 
 //{path: '#/properties/details', instancepath: '/details', fieldsetting: {…}, modelObject: Proxy(Object), apiObj: INVApi, …}
-const modelValue = defineModel<any[]>()
-    
-    
+const modelValue = defineModel<any[]>();
+
 const addNew = () => {
-    const field = props.setting.path.split('/').at(-1)    
-    props.setting.document[`add${field}`]()
-}
-/** 
+  const field = props.setting.path.split("/").at(-1);
+  props.setting.document[`add${field}`]();
+};
+/**
  * 1. support array with field to label
  * 2. auto add edit button
  * 3. option readonly or not readonly
- * 4. 
+ * 4.
  */
-
 </script>