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

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

@@ -10,7 +10,7 @@
       </template>
       <template #center>
         <slot name="center" :menu="menu">
-          <TextTitle class="text-white line-clamp-2">{{ title }}</TextTitle>
+          <TextMain class="text-white line-clamp-2">{{ title }}</TextMain>
         </slot>
       </template>
       <template #end>
@@ -33,11 +33,17 @@
         <ContextMenu ref="menu" :model="menus as MenuItem[]" />
       </template>
     </MobileToolbar>
-    <ConfirmDialog></ConfirmDialog>
   </div>
   <div v-else class="simpleapp-tool-bar">
-    <Toolbar>
-      <template #start>
+    <!--  <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 mb-2 p-0 justify-between">
+      <!-- left -->
+      <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
@@ -47,11 +53,16 @@
             >
           </div>
         </div>
-      </template>
-      <template #center>
-        <TextTitle class="text-white line-clamp-2">{{ title }}</TextTitle>
-      </template>
-      <template #end>
+      </div>
+
+      <!-- center -->
+      <div class="flex flex-row"></div>
+      <!-- right -->
+      <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
@@ -61,11 +72,11 @@
             >
           </div>
         </div>
-      </template>
-    </Toolbar>
+      </div>
+    </div>
     <ConfirmPopup></ConfirmPopup>
   </div>
-  <Dialog v-model:visible="visiblePrintFormats" :header="t('printFormats')">
+  <!-- <Dialog v-model:visible="visiblePrintFormats" :header="t('printFormats')">
     <div>
       <ListView
         :list="printformats"
@@ -73,28 +84,73 @@
         @click="printPdf"
       >
         <div class="flex flex-col">
-          <TextBold>{{ item.formatName }}</TextBold>
+          <TextBold>{{ t(item.formatName) }}</TextBold>
           <TextSubtitle>{{ item.description }}</TextSubtitle>
         </div>
       </ListView>
     </div>
-  </Dialog>
-  <Sidebar
-    v-model:visible="visiblePrintPreview"
-    :header="t('printPreview')"
-    position="bottom"
+  </Dialog> -->
+  <OverlayPanelWithToolBar
+    v-if="visiblePrintPreview"
+    v-model="visiblePrintPreview"
+    close-event-name="closePrintPreview"
   >
+    <template #headerLeft>
+      <ButtonText @click="visiblePrintPreview = false"
+        ><i class="pi pi-times"
+      /></ButtonText>
+    </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">
+          <i class="pi pi-print"></i>
+        </ButtonText>
+        <ButtonText class="text-xl" v-if="sharable" @click="togglePdfMenu">
+          <i class="pi pi-ellipsis-v"></i>
+        </ButtonText>
+      </div>
+      <div v-else></div>
+    </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>
     <vue-pdf-embed
+      ref="pdfrenderer"
       class="w-11/12"
       v-else-if="isMobile()"
       :source="printstr"
       :disableTextLayer="true"
+      @loading-failed="console.log"
+      @rendering-failed="console.log"
     />
-    <iframe v-else width="100%" height="100%" :src="printstr"></iframe>
-  </Sidebar>
+    <div class="p-0 w-full h-screen" v-else>
+      <iframe width="100%" height="100%" :src="printstr"></iframe>
+    </div>
+  </OverlayPanelWithToolBar>
 </template>
 <script setup lang="ts">
 /**
@@ -110,22 +166,34 @@ 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"]);
 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);
@@ -133,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);
@@ -140,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;
@@ -181,25 +249,36 @@ const emitMobileEvent = (itemevent: MenuItemCommandEvent) => {
   emitEvent(itemevent.item, event);
 };
 
-const printPdf = async (index: number, format: any) => {
+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
@@ -219,21 +298,20 @@ const getActions = () => {
   if (printformats && printformats.length > 0) {
     crudmenus.push({
       action: "print",
-      label: t("print"),
+      label: t("preview"),
       type: "crud",
-      icon: "pi pi-print",
+      icon: "pi pi-file-pdf",
       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") {
@@ -287,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;
 
@@ -335,6 +413,23 @@ const getActionIcon = (actionName: string) => {
   }
   return `pi ${icon}`;
 };
+
+const sendToPrint = () => {
+  // window.print()
+  pdfrenderer.value.print();
+};
+
+const sharable = computed(() => typeof navigator.share != "undefined");
+const togglePdfMenu = async () => {
+  const blob = await (await fetch(printstr.value)).blob();
+  const file = new File([blob], "fileName.pdf", { type: blob.type });
+
+  navigator.share({
+    title: "Title to be shared",
+    text: "Text to be shared",
+    files: [file],
+  });
+};
 </script>
 <style>
 .vue-pdf-embed {

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 ***************/