@simitgroup/simpleapp-generator 1.5.0-alpha → 1.6.0-alpha

package/templates/nuxt/components/image/ImageAvatar.vue.eta.vue

@@ -0,0 +1,38 @@
+<template>
+  <ImageToBase64Uploader
+    v-if="changable"
+    @image-uploaded="handleBase64"
+    #default
+    class="w-20 h-20"
+  >
+    <Avatar
+      :image="getAvatarLink(email ?? '', size)"
+      shape="circle"
+      size="xlarge"
+    />
+  </ImageToBase64Uploader>
+  <div v-else class="inline-block border rounded-lg w-20 h-20">
+    <Avatar
+      :image="getAvatarLink(email ?? '', size)"
+      shape="circle"
+      size="xlarge"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization. 
+ * IT IS NOT CHANGABLE
+ * last change 2024-04-06
+ * author: Ks Tan
+ */
+const props = defineProps<{
+  email?: string;
+  size: number;
+  changable: boolean;
+}>();
+const imageData = ref("");
+const handleBase64 = (data: string) => {
+  imageData.value = data;
+};
+</script>

package/templates/nuxt/components/image/ImageOrganization.vue.eta.vue

@@ -0,0 +1,40 @@
+<template>
+  <ImageToBase64Uploader
+    v-if="changable"
+    #default
+    class="w-20 h-20 place-content-center"
+    @image-uploaded="handleBase64"
+  >
+    <Image :src="imageData"></Image>
+  </ImageToBase64Uploader>
+  <div v-else class="inline-block border rounded-lg w-20 h-20">
+    <Image :src="imageData"></Image>
+  </div>
+</template>
+<script lang="ts" setup>
+// import {KeyValue} from ''
+const props = defineProps<{
+  changable: boolean;
+}>();
+const imageData = ref("");
+const handleBase64 = async (data: string) => {
+  const keyvalue = {
+    key: "organizationLogo",
+    value: data,
+  };
+  
+  const uploadok = await useNuxtApp()
+    .$OrganizationDoc()
+    .getApi()
+    .runUploadlogo(keyvalue);
+  if (uploadok) {
+    await loadLogo();
+  }
+};
+const loadLogo = async () => {
+  await refreshOrgLogo();
+  imageData.value = getOrgLogo();  
+};
+
+onMounted(async () => await loadLogo());
+</script>

package/templates/nuxt/components/image/ImageToBase64Uploader.vue.eta.vue

@@ -0,0 +1,147 @@
+<template>
+  <button
+    @click="openUploadDialog"
+    :title="selectedBase64Img"
+    class="place-content-center image-to-base64-uploader rounded-lg border block"
+  >
+    <slot name="default">
+      <Image v-if="selectedBase64Img" :src="selectedBase64Img" />
+      <i v-else class="pi pi-upload text-3xl"></i>
+    </slot>
+
+    <Dialog
+      v-model:visible="dialogVisible"
+      header="Image Upload"
+      :pt="{ root: { class: 'w-4/5' } }"
+    >
+      <div class="upload-container">
+        <input
+          type="file"
+          ref="fileInput"
+          accept="image/*"
+          @change="handleImageUpload"
+        />
+        <div id="preview" v-if="scaledImage" class="w-7/8">
+          <Cropper
+            ref="cropperInstance"
+            :src="scaledImage"
+            :stencil-props="{ aspectRatio: 1 }"
+            :options="cropperOptions"
+            @change="changeChropper"
+          />
+          <!-- :maxWidth="50" 
+					  :maxHeight="50" -->
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex flex-row gap-4">
+          <ButtonWarning @click="dialogVisible = false">{{
+            t("cancel")
+          }}</ButtonWarning>
+          <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
+        </div>
+      </template>
+    </Dialog>
+  </button>
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization. 
+ * IT IS NOT CHANGABLE
+ * last change 2024-04-06
+ * author: Ks Tan
+ */
+// Assuming the Dialog component and Cropper component are globally available or imported in a parent component
+import { defineEmits } from "vue";
+// import Cropper from 'cropperjs'; // Assuming CropperJS is installed using a package manager
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+const selectedBase64Img = ref("");
+const cropedBase64Img = ref("");
+const dialogVisible = ref(false);
+const previewImage = ref<string | null>(null);
+const scaledImage = ref<string | null>(null);
+const image = ref<string | null>(null);
+
+const emit = defineEmits<{
+  (event: "image-uploaded", imageData: string): void;
+}>();
+
+const openUploadDialog = () => {
+  dialogVisible.value = true;
+};
+
+const handleImageUpload = (event) => {
+  const file = event.target.files?.[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = () => {
+        const maxWidth = 800; // Set your desired maximum width
+        const maxHeight = 600; // Set your desired maximum height
+        const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
+        const scaledWidth = img.width * scale;
+        const scaledHeight = img.height * scale;
+
+        const canvas = document.createElement("canvas");
+        canvas.width = scaledWidth;
+        canvas.height = scaledHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+
+        scaledImage.value = canvas.toDataURL("image/jpeg"); // Replace with your preferred format
+      };
+      img.src = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+};
+
+// const handleImageUpload = (event) => {
+//   const file = event.target.files?.[0];
+//   if (file) {
+//     const reader = new FileReader();
+//     reader.onload = (e) => {
+//       previewImage.value = e.target.result as string;
+//       // Initialize Cropper instance automatically
+//       // if (cropperInstance.value) {
+//       //   cropperInstance.value.replace(previewImage.value); // Update Cropper with new image
+//       // }
+//     };
+//     reader.readAsDataURL(file);
+//   }
+// };
+const changeChropper = (imageEvent: any) => {
+  // console.log('changeChropper',imageEvent)
+  // if(cropedBase64Img.value==''){
+  //   cropedBase64Img.value = imageEvent.image.src
+  // }else{
+  //   cropedBase64Img.value=''
+  // }
+};
+const cropperInstance = ref();
+const cropperOptions = {
+  aspectRatio: 16 / 9, // Optional: Set aspect ratio for cropping
+  zoomable: true, // Optional: Allow zooming
+  movable: true, // Optional: Allow moving the crop area
+  viewMode: 1, // Optional: Set initial zoom level
+};
+
+const confirm = () => {
+  const imgevent = cropperInstance.value.getResult();
+  selectedBase64Img.value = imgevent.canvas.toDataURL("image/jpeg");
+  emit("image-uploaded", selectedBase64Img.value);
+
+  dialogVisible.value = false;
+  resetFileInput(); // Optional: Reset file input value
+};
+
+const resetFileInput = () => {
+  const fileInput = ref(null);
+  if (fileInput.value) {
+    fileInput.value = null;
+  }
+};
+</script>

package/templates/nuxt/components/list/ListItem.vue.eta

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex-col border-b border-gray-200 dark:border-gray-700 p-1">
+    <label class="dark:text-gray-400">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+    <div class="dark:text-white text-right">
+      <slot name="default">{{ value }}</slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-04-24
+ * Author: Ks Tan
+ */
+const props = defineProps<{
+  label?: string;
+  value?: string;
+}>();
+</script>

package/templates/nuxt/components/list/ListMessages.vue.eta

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Sidebar v-model:visible="messagesvisible" :header="t('messages')">
+      <ListView :list="list" #default="{ item, index }" @click="openMessage">
+        <div class="flex flex-col">
+          <TextBold v-if="!item.read">{{ item.messageTitle }}</TextBold>
+          <TextSubtitle v-else>{{ item.messageTitle }}</TextSubtitle>
+          <TextSubtitle class="text-xs"><RendererDateTime class="text-sm" v-model="item.created" /></TextSubtitle>
+          <TextSubtitle class="text-sm line-clamp-2">{{
+            item.description
+          }}</TextSubtitle>
+        </div>
+      </ListView>
+      <Dialog v-model:visible="viewmsg" :header="selectedMsg?.messageTitle">
+        <template #default>
+          <div v-if="selectedMsg" class="flex flex-col w-full">
+            <TextSubtitle class="text-sm"
+              ><RendererDateTime v-model="selectedMsg.created"></RendererDateTime
+            ></TextSubtitle>
+            <div class="whitespace-pre-line">{{ selectedMsg?.description}}</div>
+          </div>
+          <div v-else>
+            <TextDanger>{{ t("cannotObtainMessage") }}</TextDanger>
+          </div>
+        </template>
+        <template #footer>
+          <ButtonPrimary @click="viewmsg=false">{{t('close')}}</ButtonPrimary>
+          <ButtonDanger @click="deleteMsg">{{t('delete')}}</ButtonDanger>
+        </template>
+      </Dialog>
+      <ConfirmPopup></ConfirmPopup>
+    </Sidebar>
+  </div>
+</template>
+<script setup lang="ts">
+// import { sysMessage } from "~/composables/messages.generate";
+import { Systemmessage } from "~/simpleapp/generate/openapi";
+import { useConfirm } from "primevue/useconfirm";
+import ButtonDanger from "../button/ButtonDanger.vue";
+const confirm = useConfirm();
+const list = ref<Systemmessage[]>();
+const viewmsg = ref(false);
+const selectedMsg = ref<Systemmessage>();
+const selectedIndex = ref(0)
+const messagesvisible = defineModel<boolean>({ required: true });
+
+const openMessage = async (index: number, item: Systemmessage) => {
+  selectedMsg.value = await useNuxtApp().$SystemmessageDoc().runReadmsg(item?._id??'')
+  selectedIndex.value = index
+  const rowIndex = list.value?.findIndex(listitem=>listitem._id == item._id) ?? -1
+  if(list.value && rowIndex >=0 )list.value[rowIndex].read=true
+  console.log("selectedMsg.value",selectedMsg.value)  
+  viewmsg.value=true
+  
+};
+const deleteMsg = async (clickEvent:MouseEvent) =>{
+
+  confirm.require({
+      target: clickEvent.target as HTMLElement,
+      header: t("deleteRecord"),
+      message: `${t("deleteThisRecord?")}`,
+
+      // icon: "pi pi-exclamation-triangle gap-4",
+      acceptClass: "p-button-danger",
+      accept: async () => {
+        const id = selectedMsg.value?._id ??''
+        const deleteresult = await useNuxtApp().$SystemmessageDoc().delete(id)
+        if(deleteresult) {
+          viewmsg.value = false
+          list.value?.splice(selectedIndex.value,1)
+        }
+      },
+    });
+
+
+  
+}
+const refresh = async ()=>{
+   list.value = await sysMessage.download()
+}
+onMounted(async () => {
+    await refresh()
+    listenDocumentList('systemmessage',()=>{
+      refresh()
+    })
+});
+
+
+</script>

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

@@ -46,7 +46,7 @@
       </template>
       <template #option="{ index, option }">
         <slot name="option" :index="index" :option="option">
-          <div class="flex flex-row dark:text-white">
+          <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>

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

@@ -32,7 +32,7 @@
         </slot>
         <ContextMenu ref="menu" :model="menus as MenuItem[]" />
       </template>
-    </MobileToolbar>    
+    </MobileToolbar>
     <ConfirmDialog></ConfirmDialog>
   </div>
   <div v-else class="simpleapp-tool-bar">
@@ -65,14 +65,48 @@
     </Toolbar>
     <ConfirmPopup></ConfirmPopup>
   </div>
+  <Dialog v-model:visible="visiblePrintFormats" :header="t('printFormats')">
+    <div>      
+      <ListView
+        :list="printformats"
+        #default="{ item, index }"
+        @click="printPdf"
+      >
+        <div class="flex flex-col">
+          <TextBold>{{ item.formatName }}</TextBold>
+          <TextSubtitle>{{ item.description }}</TextSubtitle>
+        </div>
+      </ListView>
+    </div>
+  </Dialog>
+  <Sidebar
+    v-model:visible="visiblePrintPreview"
+    :header="t('printPreview')"
+    position="bottom"
+  >
+  
+    <TextDanger v-if="printservererror || !printstr">
+      {{ t("printServerError") }}
+    </TextDanger>
+    <vue-pdf-embed v-else-if="isMobile()" 
+        :source="printstr" 
+        :disableTextLayer="true" 
+        />
+    <iframe v-else width="100%" height="100%" :src="printstr"></iframe>
+    
+  </Sidebar>
 </template>
 <script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator during initialization. It is changable.
- * --remove-this-line-to-prevent-override--
- * last change 2024-02-22
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2024-04-02
  * author: Ks Tan
  */
+ import VuePdfEmbed from 'vue-pdf-embed'
+
+// import VuePdfKit from 'vue-pdf-kit'
+// import 'vue-pdf-kit/dist/style.css'
 
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
 import { useConfirm } from "primevue/useconfirm";
@@ -81,10 +115,15 @@ import { MenuItem } from "primevue/menuitem";
 import { MenuItemCommandEvent } from "primevue/menuitem";
 const confirm = useConfirm();
 const emits = defineEmits(["on", "close"]);
+const visiblePrintFormats = ref(false);
+const visiblePrintPreview = ref(false);
+const printstr = ref();
+const printservererror = ref(false);
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   disableaction?: string[];
 }>();
+
 const createData = async () => {
   try {
     return await doc.create();
@@ -111,13 +150,13 @@ const doc = props.document;
 const data = doc.getReactiveData();
 type Datatype = keyof typeof data.value;
 const config = doc.getSchema()["x-simpleapp-config"];
-const titlefield = (config.uniqueKey ?? config.documentTitle) as Datatype;
+const titlefield = (config.documentTitle ?? config.uniqueKey) as Datatype;
 const title = computed(() =>
   data.value[titlefield as Datatype]
     ? data.value[titlefield as Datatype]
     : t(doc.getDocName()),
 );
-
+const printformats = doc.getSchema()["x-simpleapp-config"]?.printFormats;
 const menu = ref();
 const menus = computed(() =>
   [...getActions(), ...getDocActions()].filter((item) => showMenuButton(item)),
@@ -142,8 +181,27 @@ const emitMobileEvent = (itemevent: MenuItemCommandEvent) => {
   emitEvent(itemevent.item, event);
 };
 
+const printPdf = async (index: number, format: any) => {
+  printservererror.value = false;
+  const formatid: string = format.formatId;
+  visiblePrintPreview.value = true;
+  // console.log("formatidformatid", format);
+  try {
+    const tmp: any = await doc
+      .getApi()
+      .runPrint(data.value._id ?? "", formatid);
+    printstr.value = 
+        "data:application/pdf;base64," + 
+        tmp.data;
+  } catch (e) {
+    printservererror.value = true;
+    printstr.value = "";
+    console.error("error from print server", e);
+  }
+};
 const getActions = () => {
   const actions = doc.getActions();
+  const printformats = doc.getSchema()["x-simpleapp-config"]?.printFormats;
   const crudmenus: any[] = [];
 
   // Object.keys(actions).forEach((key)=>{ //crud, api, docstatus
@@ -160,11 +218,26 @@ const getActions = () => {
       });
     }
   });
+  if (printformats && printformats.length > 0) {
+    crudmenus.push({
+      action: "print",
+      label: t("print"),
+      type: "crud",
+      icon: "pi pi-print",
+      command: showPrintFormats,
+    });
+  }
+  console.log("crudmenus", crudmenus);
+
   // })
   return crudmenus;
 };
 
-const emitEvent = async (menu: FormMenu, clickEvent: MouseEvent) => {
+const showPrintFormats = () => {
+  visiblePrintFormats.value = true;
+  // console.log("showPrintFormatContext",itemEvent)
+};
+const emitEvent = async (menu: FormMenu, clickEvent: Event | MouseEvent) => {
   if (menu.action == "delete") {
     confirm.require({
       target: clickEvent.target as HTMLElement,
@@ -178,7 +251,9 @@ const emitEvent = async (menu: FormMenu, clickEvent: MouseEvent) => {
       },
     });
   } else {
-    if (menu.action == "create") {
+    if (menu.action == "print") {
+      showPrintFormats();
+    } else if (menu.action == "create") {
       if (await createData()) emits("on", FormCrudEvent.create);
     } else if (menu.action == "update") {
       if (await updateData()) emits("on", FormCrudEvent.update);
@@ -214,6 +289,7 @@ const getDocActions = () => {
 const showMenuButton = (menu: FormMenu) => {
   if (menu.separator) return true;
 
+  if (menu.action == "print") return true;
   //all document status cannot direct apply regardless new or draft
   if (menu.type == "docstatus") return true;
 
@@ -262,3 +338,13 @@ const getActionIcon = (actionName: string) => {
   return `pi ${icon}`;
 };
 </script>
+<style>
+  .vue-pdf-embed {
+    @apply p-4
+  }
+  .vue-pdf-embed > div {
+    @apply mb-4;
+    /* margin-bottom: 8px;
+    box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1); */
+  }
+</style>

package/templates/nuxt/components/text/TextBold.vue._eta

@@ -0,0 +1,13 @@
+<template>
+  <div class="text-base font font-bold">
+    <slot name="default"></slot>
+  </div>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-04-24
+ * author: Ks Tan
+ */
+</script>

package/templates/nuxt/composables/getUserStore.generate.ts.eta

@@ -1,9 +1,11 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-04-06
  * Author: Ks Tan
  */
+let orgLogo = ""
+
 export const getUserStore = ()=>{
     const {$userstore} = useNuxtApp()
     return $userstore
@@ -36,4 +38,11 @@ export const canPerform = (resource:string,action:string):boolean =>{
 }
 
 export const getProfileEmail = () => getUserProfile()?.email
-export const getProfileFullName = () => getUserProfile()?.fullName
+export const getProfileFullName = () => getUserProfile()?.fullName
+
+export const refreshOrgLogo = async () => {
+  const logodata = await useNuxtApp().$OrganizationDoc().getApi().runGetlogo()
+  orgLogo = logodata.data
+}
+export const getOrgLogo = ()=> orgLogo
+export const setOrgLogo = (str:string) => orgLogo = str

package/templates/nuxt/composables/graphquery.generate.ts.eta

@@ -13,14 +13,14 @@ export const setGraphqlServer=()=>{
         uri: `${useRuntimeConfig().public.API_URL}/${getCurrentXorg()}/graphql`,
       })
       apolloclient.setLink(newlink)
-    //   apolloclient.defaultOptions={
+      apolloclient.defaultOptions={
        
-    //     query:{
-    //      fetchPolicy: 'no-cache',
-    //      errorPolicy: 'all'
-    //     }
-    //   }
+        query:{
+         fetchPolicy: 'no-cache',
+         errorPolicy: 'all'
+        }
+      }
 
   }
   
-export const graphquery=async(qqlstr: typeof gql) =>(await useAsyncQuery(qqlstr)).data
+export const graphquery=async<T>(qqlstr: typeof gql) =>(await useAsyncQuery<T>(qqlstr)).data

package/templates/nuxt/composables/hotvalue.generate.ts.eta

@@ -0,0 +1,30 @@
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2024-04-20
+ * Author: Ks Tan
+ */
+
+import { Channel } from "pusher-js"
+
+let channels: {[key:string]:Channel} = {}
+
+export const subscribeHotValueText=(eventName:string,callback:Function )=>{
+    const channelname = `[${getUserProfile()?.tenantId??0}]${eventName}`
+    channels[channelname]= useNuxtApp().$pusher.subscribe('text')
+    channels[channelname].bind(channelname,(msg:string)=>{
+        callback(msg)
+    })    
+}
+
+export const subsribeHotValueJson=(eventName:string,callback:Function )=>{
+    const channelname = `[${getUserProfile()?.tenantId??0}]${eventName}`
+    channels[channelname]= useNuxtApp().$pusher.subscribe('json')
+    channels[channelname].bind(channelname,(jsondata:any)=>{
+        callback(jsondata)
+    })    
+}
+
+export const clearChannel = () =>{
+    channels = {}
+}

package/templates/nuxt/composables/pusher.ts._eta

@@ -0,0 +1,13 @@
+/**
+ * This file was automatically generated by simpleapp generator.
+ * --remove-this-line-to-prevent-override--
+ * last change 2023-10-28
+ * Author: Ks Tan
+ */
+
+export const activatePusher =()=>{
+  clearChannel()
+  subscribeHotValueText(`messages:${getUserProfile()?.uid}`,async (msg:string)=>{
+      refreshDocumentList('systemmessage')      
+    })
+}

package/templates/nuxt/composables/stringHelper.generate.ts.eta

@@ -6,9 +6,9 @@
  */
 import _ from 'lodash'
 import {Md5} from 'ts-md5'
-import moment from "moment";
 import { v4 as uuidv4 } from 'uuid';
 
+let orgLogo = ""
 export const camelCaseToWords = (s: string) =>{
     const result = s.replace(/([A-Z])/g, ' $1');
     return result.charAt(0).toUpperCase() + result.slice(1);
@@ -18,8 +18,7 @@ export const randomUUID = ()=> uuidv4()
 export const md5=(s:string)=>  new Md5().appendStr(s).end()
 
 export const getAvatarLink = (email:string, size:number):string=>{
-  return `https://api.simbiz.cloud/cloudapi/avatar/${md5(email)}?size=${size}`
-  
+  return `https://api.simbiz.cloud/cloudapi/avatar/${md5(email)}?size=${size}`  
 }
 
 export const t = (txt:string,options?:any):string => !txt || txt.trim()=='' ? '' : useNuxtApp().$i18n.t(txt,options)

package/templates/nuxt/composables/sysmessage.generate.ts.eta

@@ -0,0 +1,20 @@
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2024-03-24
+ * Author: Ks Tan
+ */
+import { Systemmessage } from "~/simpleapp/generate/openapi";
+
+let messages = ref<Systemmessage[]>([])
+export const systemMsgQty = computed(()=>messages.value.filter(item=>!item.read).length)
+export const sysMessage ={
+    download: async ()=> {
+        messages.value = await useNuxtApp().$SystemmessageDoc().search({})
+        console.log("Download messages",messages)
+        return messages.value
+    },
+    getMessages: () => messages.value
+}
+
+