@simitgroup/simpleapp-generator 1.6.4-e-alpha → 1.6.4-g-alpha

package/templates/nuxt/components/calendar/CalendarSmall.vue.eta

@@ -1,129 +1,132 @@
-<template>
-  <ClientOnly>
-    <VueCal
-      :id="id"
-      class="w-full"
-      hide-view-selector
-      click-to-navigate
-      :time="false"
-      today-button
-      active-view="month"
-      :disable-views="['week', 'day']"
-      :selected-date="selectedDate"
-      events-count-on-year-view
-      @view-change="viewChange"
-      :events="allevents"
-      @cell-focus="chooseDate"
-      xsmall
-    >
-      <template #today-button>
-        <!-- Using Vuetify (but we prefer Wave UI 🤘) -->
-        <div @click="chooseDate(new Date(), true)">{{ t("today") }}</div>
-      </template>
-      <template #cell-content="{ cell, events }">
-        <div>
-          <div>
-            <s
-              v-if="isHoliday(cell.formattedDate)"
-              v-tooltip="getHolidayName(new Date(cell.formattedDate))"
-              class="text text-red-400 dark:text-red-400 font-bold"
-              >{{ cell.content }}</s
-            >
-            <div v-else-if="isOffDay(cell)" class="text-gray-400">
-              <s v-tooltip="t('offDay')">{{ cell.content }}</s>
-            </div>
-            <span v-else>{{ cell.content }} </span>
-          </div>
+<template>    
+  <Calendar 
+      v-model="selectedDate"
+      inline            
+      @update:modelValue="chooseDate"
+      :pt="{root:{class:'w-full'}}" 
+      @month-change="viewChange"
+      @year-change="viewChange"
+      class="smallcalendar">
+      <template #footer>
+          <div class="p-2 flex flex-row justify-between">
+              <ButtonPrimary @click="goToday()">{{ t('today') }}</ButtonPrimary>
+              <TextSubsubtitle class="text-right"
+                  >{{ items.length }} {{ t("records") }}</TextSubsubtitle>
 
-          <div>
-            <slot name="default" :cell="cell" :events="events">
+          </div>
+      </template>
+      <template #date="{date}">
+          <div class="flex flex-col text-center" >            
+              <s v-if="isHoliday(date)" class="text-red-600">
+                  {{ date.day }}                     
+              </s>
+              <span v-else-if="isOffDay(date)" class="text-gray-400">
+                  {{ date.day }}
+              </span>
+              <template v-else>
+                  {{ date.day }}
+              </template>
               <Badge
-                v-if="events.length > 0"
-                @contextmenu="
-                  (mouseevent) => onRightClickDate(mouseevent, cell)
-                "
-                severity="info"
-                :value="events.length"
+                  v-if="getEventQty(date) > 0"                
+                  severity="info"
+                  :value="getEventQty(date)"
               />
-            </slot>
           </div>
-        </div>
       </template>
-    </VueCal>
-  </ClientOnly>
+  </Calendar>
 </template>
-<script lang="ts" setup generic="T">
-/**
- * This file was automatically generated by simpleapp generator during initialization.
- * IT IS NOT CHANGABLE
- * last change 2024-02-22
- * author: Ks Tan
- */
-//, { Event, SplitDaysAttributes }
-import VueCal from "vue-cal";
-import "vue-cal/dist/vuecal.css";
+<script setup lang="ts" generic="T">
+import { CalendarDateSlotOptions,CalendarMonthChangeEvent } from "primevue/calendar";
+
 import {
-  CalEventType,
-  CalRightClickEvent,
-  OffDay,
-  CalViewChange,
+CalEventType,
+CalRightClickEvent,
+OffDay,
+CalViewChange,
 } from "~/types";
-const viewStatus = ref<CalViewChange>();
+
 const props = defineProps<{
-  id: string;
-  items: CalEventType<T>[];
-  holidays: OffDay[];
+id: string;
+items: CalEventType<T>[];
+holidays: OffDay[];
 }>();
-const offdays = ref<string[]>([]);
-const emits = defineEmits(["chooseDate", "rightClick","viewChange"]);
-// const allholidays = computed(() => props.holidays.map((item) => item.date));
+const emits = defineEmits(["chooseDate", "viewChange"]);
+
+
 const selectedDate = defineModel<Date>({ required: true });
-const getHolidayName = (date: Date) =>
-  props.holidays.find((item) => item.date.getTime() == date.getTime())?.title;
-const allevents = computed(() => {
-  const list = props.items.map((item) => {
-    if (item.start instanceof Date)
-      item.start = item.start.format("YYYY-MM-DD HH:mm");
-    else if (typeof item.start == "string") {
-      item.start = item.start.substring(0, 16).replace("T", " ");
-    }
-    if (item.end instanceof Date)
-      item.end = item.end.format("YYYY-MM-DD HH:mm");
-    else if (typeof item.end == "string") {
-      item.end = item.end.substring(0, 16).replace("T", " ");
-    }
-    return item;
-  });
-  return list;
-});
-const viewChange = (event: CalViewChange) => {
-  viewStatus.value = event;
-  emits('viewChange',event)
-};
+const offdays = ref<string[]>([]);
+type DateType = {
+  day: number
+  month : number
+  otherMonth: boolean
+  selectable : boolean
+  today : boolean
+  year: number
+}
 
-const isHoliday = (datestr: string) => {
-  return props.holidays.find(
-    (item) => item.date.format("YYYY-MM-DD") == datestr,
-  );
-};
-const isOffDay = (cell: any) => {
-  const dayname: string = new Date(cell.formattedDate)
-    .toLocaleString("en", { weekday: "short" })
-    .toLowerCase();
-  if (offdays.value.includes(dayname)) return true;
-  else return false;
-};
-const chooseDate = (date1: Date, force?: boolean) => {
-  if (force || !viewStatus.value || viewStatus.value.view == "month") {
-    selectedDate.value = date1;
-    emits("chooseDate", date1);
+const disableDays=computed(()=>{
+  return offdays.value.map(item=>{
+      if(item=='sun')return 0
+      else if(item=='mon')return 1
+      else if(item=='tue')return 2
+      else if(item=='wed')return 3
+      else if(item=='thu')return 4
+      else if(item=='fri')return 5
+      else if(item=='sat')return 6
+  })
+})
+
+function isHoliday(date:CalendarDateSlotOptions){
+
+  for(let i = 0 ; i<props.holidays.length;i++){
+      const item = props.holidays[i]
+      const currenyday = getDayJs()(item.date).date()
+      const currentmonth = getDayJs()(item.date).month()
+      const currentyear = getDayJs()(item.date).year()
+      if(currenyday==date.day && currentmonth==date.month && currentyear==date.year){
+          return true
+      }
   }
+  return false   
+}
+function goToday(){
+  selectedDate.value= new Date(today())
+  chooseDate(new Date(today()))
+}
+function chooseDate(date: string | string[] | Date | Date[] | undefined){
+  emits('chooseDate',date)
+}
+
+const isOffDay = (date:CalendarDateSlotOptions) => {    
+const dayname: string = new Date(date.year,date.month, date.day)
+
+  .toLocaleString("en", { weekday: "short" })
+  .toLowerCase();
+if (offdays.value.includes(dayname)) return true;
+else return false;
 };
-const onRightClickDate = (e: MouseEvent, cell: CalRightClickEvent) => {
-  emits("rightClick", e, cell);
+
+const getEventQty = (date:CalendarDateSlotOptions)=>{
+  const checkdate = dateToISOWithoutConvert(new Date(date.year,date.month, date.day)).substring(0,10)    
+  const recordlength =  props.items.filter(item=>item.start==checkdate).length
+  return recordlength
+}
+const viewChange = (event: CalendarMonthChangeEvent) => {    
+emits("viewChange", event);
 };
 
+
 onMounted(() => {
-  offdays.value = getCurrentBranch()?.branch.offdays ?? [];
+offdays.value = getCurrentBranch()?.branch.offdays ?? [];
 });
 </script>
+<style >
+.smallcalendar td {   
+ height: 3rem;
+ border: solid 1px #ccc;   
+}
+.smallcalendar .p-datepicker table td > span {
+  widows: initial !important;
+  height: initial  !important;
+}
+</style>

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

@@ -1,23 +1,57 @@
 <template>
-  <div :class="`inline-block border rounded-lg w-${size} h-${size} bg-white`">
-    <Avatar
-      :image="getAvatarLink(<string>id, size*3)"
-      shape="circle"
+  <ImageToBase64Uploader
+    v-if="changable"
+    #default
+    :class="`w-${sizenumber} h-${sizenumber} place-content-center bg-white`"
+    @image-uploaded="handleBase64"
+  >
+    <NuxtImg
       class="w-full h-full"
+      :key="imageKey"     
+      :src="imagepath"
     />
-   
-    
+  </ImageToBase64Uploader>
+  <div
+    v-else
+    :class="`inline-block border rounded-lg w-${sizenumber} h-${sizenumber} bg-white text-black`"
+  >
+    <NuxtImg class="w-full h-full"  :src="imagepath" />
   </div>
 </template>
 <script lang="ts" setup>
-/**
- * This file was automatically generated by simpleapp generator during initialization.
- * --remove-this-line-to-prevent-override--
- * last change 2024-04-06
- * author: Ks Tan
- */
+// import {KeyValue} from ''
 const props = defineProps<{
-  id?: string;
+  changable?: boolean;
+  uid?: string;
   size: number;
 }>();
+const imageKey = ref(0);
+const uid = computed(
+  () => props.uid ?? getUserProfile()?.uid,
+);
+// const xorgpath = getCurrentXorg() ? `${getCurrentXorg()}/` : "MC0wLTA/";
+
+const sizenumber = props.size ?? 16;
+const imagepath = getAvatarByUid(uid.value,sizenumber) //`${xorgpath}images/organization/${orgRecordId.value}`;
+const imageData = ref("");
+watch(
+  uid,
+  () => imageKey.value++,
+);
+const handleBase64 = async (data: string) => {
+  // const keyvalue = {
+  //   key: "org-" + props.orgRecordId,
+  //   value: data,
+  // };
+  // console.log("upload logo ", data);
+  // const uploadok = await useNuxtApp()
+  //   .$OrganizationDoc()
+  //   .getApi()
+  //   .runUploadlogo(keyvalue);
+  // if (uploadok) {
+  //   const realpath = `/api/${imagepath}`;
+  //   await fetch(realpath, { cache: "reload", credentials: "include" });
+  //   imageKey.value++;
+  // }
+};
 </script>

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

@@ -2,7 +2,7 @@
   <div
     @click="openUploadDialog"
     :title="selectedBase64Img"
-    class="vvv place-content-center image-to-base64-uploader rounded-lg border block"
+    class="place-content-center image-to-base64-uploader rounded-lg border block"
   >
     <ClientOnly>
       <slot name="default">
@@ -11,10 +11,10 @@
       </slot>
 
       <Dialog
-        v-if="dialogVisible"
+        v-if="dialogVisible" modal
         v-model:visible="dialogVisible"
         header="Image Upload"
-        :pt="{ root: { class: 'w-4/5' } }"
+        :pt="{ root: { class: 'w-11/12' } }"
       >
         <div class="w-full grid grid-cols-2 gap-2">
           <div class="w-7/8 border rounded p-4">
@@ -96,8 +96,8 @@ const handleImageUpload = (event) => {
     reader.onload = (e) => {
       const img = new Image();
       img.onload = () => {
-        const maxWidth = 400; // Set your desired maximum width
-        const maxHeight = 300; // Set your desired maximum height
+        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;

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

@@ -1,16 +1,19 @@
 <template>
   <div
-    class="flex flex-row text-xs cursor-pointer justify-end "
+    class="flex flex-row text-xs cursor-pointer justify-end"
     v-if="data?.updated && data?.updated != ''"
     @click="viewHistories"
   >
-    <ImageAvatar  
+    <ImageAvatar
       v-if="data?.updatedBy"
       :id="data.updatedBy"
-      :size="8"
+      :size="36"
     ></ImageAvatar>
     <div class="flex flex-col flex-1">
-      <TextDocStatus v-if="data?.documentStatus" :docStatus="data?.documentStatus" />
+      <TextDocStatus
+        v-if="data?.documentStatus"
+        :docStatus="data?.documentStatus"
+      />
       <!-- <TextSubsubtitle class="text-gray-400 italic"
         >{{ t("updated") }}:</TextSubsubtitle
       > -->
@@ -26,7 +29,7 @@
       <Timeline :value="events" class="w-full md:w-20rem">
         <template #opposite="{ item }">
           <div class="flex flex-row">
-            <ImageAvatar :email="item.email" :id="item.uid" :size="12" />
+            <ImageAvatar :email="item.email" :id="item.uid" />
             <div class="flex flex-col">
               <span>{{ item.fullName }}</span>
               <RendererDateAge

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

@@ -34,51 +34,51 @@
       v-bind="componentProps as InputSwitchProps"
       @change="onChange"
     />
-    
+
     <!-- calendar component -->
-    <SimpleAppCalendarInput 
+    <SimpleAppCalendarInput
       v-else-if="
         SimpleAppInputType.calendar == inputType ||
         inputType == SimpleAppInputType.date
       "
       :pt="pt"
       type="date"
-      v-model="modelValue"      
+      v-model="modelValue"
       :uuid="slotprops.uuid"
       :placeholder="placeholder"
       :setting="setting"
       :readonly="isReadonly"
       :componentProps="componentProps"
       @change="onChange"
-      />
-    
+    />
+
     <!-- time component -->
-    <SimpleAppCalendarInput 
+    <SimpleAppCalendarInput
       v-else-if="inputType == SimpleAppInputType.time"
       :pt="pt"
       type="time"
-      v-model="modelValue"      
+      v-model="modelValue"
       :uuid="slotprops.uuid"
       :placeholder="placeholder"
       :setting="setting"
       :readonly="isReadonly"
       :componentProps="componentProps"
       @change="onChange"
-      />
-    
-    <SimpleAppCalendarInput 
+    />
+
+    <SimpleAppCalendarInput
       v-else-if="inputType == SimpleAppInputType.datetime"
       :pt="pt"
       type="datetime"
-      v-model="modelValue"      
+      v-model="modelValue"
       :uuid="slotprops.uuid"
       :placeholder="placeholder"
       :setting="setting"
       :readonly="isReadonly"
       :componentProps="componentProps"
       @change="onChange"
-      />
-    
+    />
+
     <!-- select/list component -->
     <Listbox
       v-model="modelValue"
@@ -279,7 +279,7 @@
       @focus="setFocus"
       :max-fraction-digits="2"
       :min-fraction-digits="2"
-      mode="currency" 
+      mode="currency"
       :currency="getCurrency()"
       :readonly="isReadonly"
       :pt="pt"
@@ -304,6 +304,16 @@
       :placeholder="placeholder"
       v-bind="componentProps as TextareaProps"
     />
+    <Editor  
+      v-else-if="inputType == SimpleAppInputType.html"
+      @update:modelValue="onChange"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :placeholder="placeholder"
+      :readonly="isReadonly"
+      v-model="modelValue as string" 
+      v-bind="componentProps as EditorProps"
+      />
     <InputText
       v-else
       v-model="modelValue as string"
@@ -351,12 +361,12 @@ import RadioButton, { RadioButtonProps } from "primevue/radiobutton";
 import Rating, { RatingProps } from "primevue/rating";
 import Slider, { SliderProps } from "primevue/slider";
 import Textarea, { TextareaProps } from "primevue/textarea";
+import Editor, { EditorProps } from "primevue/editor";
 import { SimpleAppInputType } from "~/types";
 const resetcount = ref(0);
 const instancepath = ref("");
 const modelValue = defineModel({ required: true });
 
-
 const watchOnChange = ref(false);
 const props = withDefaults(
   defineProps<{
@@ -388,7 +398,6 @@ const props = withDefaults(
 
 const pt = ref(props.pt);
 
-
 if (props?.instancepath) instancepath.value = props.instancepath;
 else if (props.setting?.instancepath)
   instancepath.value = props.setting.instancepath;
@@ -432,7 +441,6 @@ const isReadonly = computed(() => {
   }
 });
 
-
 const setFocus = (ev: any) => {
   if (!isMobile()) ev.target.select();
 };
@@ -464,7 +472,6 @@ const emits = defineEmits([
   "update:docNoFormat",
 ]);
 
-
 const onChange = () => {
   if (props.setting.document.isReady()) {
     pt.value = undefined;

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

@@ -7,7 +7,7 @@
 import _ from 'lodash'
 import {Md5} from 'ts-md5'
 import { v4 as uuidv4 } from 'uuid';
-
+const myAvatarVersion = ref(0)
 let orgLogo = ""
 export const camelCaseToWords = (s: string) =>{
     const result = s.replace(/([A-Z])/g, ' $1');
@@ -17,15 +17,19 @@ export const camelCaseToWords = (s: string) =>{
 export const randomUUID = ()=> uuidv4() 
 export const md5=(s:string)=>  new Md5().appendStr(s).end()
 
-export const getAvatarLink = (email:string, size:number):string=>{
-  return `https://gravatar.com/avatar/${md5(email)}?size=${size}`;
-  //return `https://api.simbiz.cloud/cloudapi/avatar/${md5(email)}?size=${size}`  
-}
-export const getAvatarByUid = (id:string, size:number):string=>{
-  const url = `${useRuntimeConfig().public.APP_URL}/api/${getCurrentXorg()}`
-  return `${url}/images/user/${id}`;
-  
+// export const getAvatarLink = (email:string, size:number):string=>{
+  // return `https://gravatar.com/avatar/${md5(email)}?size=${size}`;
+  // return useRuntimeConfig().public.AVATAR_URL+`${md5(email)}?size=${size}`
+// }
+export const getAvatarByUid = (id:string, size?:number):string=>{  
+  if(size===undefined)size=160
+  return `${useRuntimeConfig().public.AVATAR_URL}/${md5(id)}?size=${size}`
 }
+export const updateAvatarVersion = ()=>{
+  myAvatarVersion.value++
+  useNuxtApp().$event('RefreshUser',getUserProfile().uid)
+  }
+export const getAvatarVersion = ()=>myAvatarVersion
 
 export const getDefaultLocale =()=> useNuxtApp().$i18n.defaultLocale
 export const t = (txt:string,options?:any):string => typeof txt !='string' ?'' : useNuxtApp().$i18n.t(txt.trim(),options)

package/templates/nuxt/pages/profile.vue.eta

@@ -1,6 +1,8 @@
 <template>
   <title>{{ t("profile") }}</title>
-
+  <div class="p-4 place-items-center text-center justify-center flex flex-row">
+    <ImageAvatar :size="128" changable class="cursor-pointer"/>
+  </div>
   <div class="p-4">
     <div class="px-4 sm:px-0">
       <h3

package/templates/nuxt/server/api/profile/[...].ts.eta

@@ -45,8 +45,11 @@ export default defineEventHandler(async (event:any) => {
         // }
 
         const frontEndRes = event.node.res;
-        const url = process.env.SIMPLEAPP_BACKEND_URL + `/profile/${documentLink}`;
+        
+        const url =  process.env.SIMPLEAPP_BACKEND_URL + `/profile/${documentLink}`;
         // console.warn('backend server-----',req.method,url,forwardData)
+
+        
         const axiosConfig: any = {
             method: req.method,
             url: url,
@@ -56,7 +59,12 @@ export default defineEventHandler(async (event:any) => {
             data: forwardData,
             params: forwardData,
         }
-        
+
+        if(documentLink=='avatar' ){
+            axiosConfig.url =  process.env.AVATAR_URL
+            delete axiosConfig.params
+        }
+        // console.log("axiosConfig",axiosConfig)
         // if(key === 'system') {
         //     axiosConfig.headers["X-Global"] = true;
         //     delete axiosConfig.headers["X-Org"];
@@ -68,6 +76,7 @@ export default defineEventHandler(async (event:any) => {
         // }
 
         axios(axiosConfig).then((res) => {
+            // console.log("RRes",res)
             if (res.headers['content-type'] === 'image/png') {
                 // Set the response headers for the image
                 frontEndRes.setHeader('Content-Type', 'image/png');

package/templates/nuxt/simpleapp/generate/commons/documents.ts.eta

@@ -15,6 +15,8 @@ export const getAllDocuments=():DocumentMetaData[]  => [
       {docName:'<%= d['docname'].toLowerCase() %>',docType:'<%= d['doctype'].toUpperCase()%>',page: '<%=d['pagetype']%>', isolationType:'<%=conf['isolationType']%>', 
             documentDate:'<%=conf['documentDate']??""%>', docNumber:<%=conf['generateDocumentNumber']??false%>, 
             viewer: () => import('~/components/viewer/Viewer<%=d['docname']%>.vue'),
-              docClass: useNuxtApp().$<%=d['docname']%>Doc()},
+              docClass: useNuxtApp().$<%=d['docname']%>Doc(),
+              webhook:<%~ JSON.stringify(conf['webhook'])%>
+              },
     <%}%>
   ]

package/templates/nuxt/types/others.ts.eta

@@ -30,6 +30,7 @@ export type NameValue={
     isolationType:string   
     documentDate:string
     docNumber:boolean
+    webhook:string[]|undefined
     docClass: SimpleAppClient<any,any>
     viewer?: Function
   }

package/templates/nuxt/types/simpleappinput.ts.eta

@@ -7,7 +7,8 @@
 export enum SimpleAppInputType  {
     'text'='text',
     'textarea'='textarea',
-
+    'html'='html',
+    
     'date'='date',
     'time'='time',
     'calendar'='calendar',