@simitgroup/simpleapp-generator 1.3.3-alpha → 1.3.4-alpha

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

@@ -1,80 +1,94 @@
-<template>    
-    <vue-cal
-        :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 #cell-content="{ cell, view, events }" class="bg-red-300">            
-            <div class="flex flex-col" @contextmenu="(mouseevent:MouseEvent)=>onRightClickDate(mouseevent,cell)">
-                <div>
-                    <s
-                        v-if="dateExists(new Date(cell.formattedDate),alloffdays)"
-                        v-tooltip="getHolidayName(new Date(cell.formattedDate))"
-                        class="text text-red-400 font-bold"
-                        >{{ cell.content }}</s
-                    >
-                    <span v-else>{{ cell.content }} </span>
-                </div>
-                <div>
-                    <slot name="default" :cell="cell" events="events">                            
-                        <Badge  v-if="events.length>0"  
-                            @contextmenu="(mouseevent:MouseEvent)=>onRightClickDate(mouseevent,cell)"
-                            severity="info"
-                            :value="events.length"/>                               
-                    </slot>
-                </div>
-            </div>            
-        </template>
-    </vue-cal>    
+<template>
+  <vue-cal
+    :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 @contextmenu="(mouseevent) => onRightclickDate(mouseevent, cell)">
+        <div>
+          <s
+            v-if="dateExists(new Date(cell.formattedDate), alloffdays)"
+            v-tooltip="getHolidayName(new Date(cell.formattedDate))"
+            class="text text-red-400 font-bold"
+            >{{ cell.content }}</s
+          >
+          <span v-else>{{ cell.content }} </span>
+        </div>
+        <div>
+          <slot name="default" :cell="cell" events="events">
+            <Badge
+              v-if="events.length > 0"
+              @contextmenu="(mouseevent) => onRightClickDate(mouseevent, cell)"
+              severity="info"
+              :value="events.length"
+            />
+          </slot>
+        </div>
+      </div>
+    </template>
+  </vue-cal>
 </template>
 <script lang="ts" setup generic="T">
 /**
- * This file was automatically generated by simpleapp generator during initialization. 
+ * This file was automatically generated by simpleapp generator during initialization.
  * IT IS NOT CHANGABLE
  * last change 2024-02-22
  * author: Ks Tan
  */
 import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
-import { CalEventType,CalRightClickEvent,OffDay } from '~/types'
-
+import {
+  CalEventType,
+  CalRightClickEvent,
+  OffDay,
+  CalViewChange,
+} from "~/types";
+const viewStatus = ref<CalViewChange>();
 const props = defineProps<{
-    id:string
-    items:CalEventType<T>[]
-    offdays:OffDay[]
-}>()
-const emits =  defineEmits(['chooseDate','rightClick'])
-const alloffdays = computed(()=> props.offdays.map(item=>item.date))
-const selectedDate = defineModel<Date>({required:true})
-const getHolidayName = (date:Date) => props.offdays.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')
-        if(item.end instanceof Date) item.end = item.end.format('YYYY-MM-DD HH:mm')
-        return item
-    })
-    return list
-})
-const viewChange = (event: any) => {    
-    console.log("Calendar Small view change")
-  chooseDate(event.startDate);
+  id: string;
+  items: CalEventType<T>[];
+  offdays: OffDay[];
+}>();
+const emits = defineEmits(["chooseDate", "rightClick"]);
+const alloffdays = computed(() => props.offdays.map((item) => item.date));
+const selectedDate = defineModel<Date>({ required: true });
+const getHolidayName = (date: Date) =>
+  props.offdays.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");
+    if (item.end instanceof Date)
+      item.end = item.end.format("YYYY-MM-DD HH:mm");
+    return item;
+  });
+  return list;
+});
+const viewChange = (event: CalViewChange) => {
+  viewStatus.value = event;
 };
-const chooseDate = (date1: Date) => {
-  selectedDate.value = date1;
-  emits('chooseDate',selectedDate.value)
+const chooseDate = (date1: Date, force?: boolean) => {  
+  if (force || !viewStatus.value || viewStatus.value.view == "month") {
+    selectedDate.value = date1;    
+    emits("chooseDate", date1);
+  }
 };
-const onRightClickDate=(e: MouseEvent,cell:CalRightClickEvent)=>{    
-    emits('rightClick',e,cell)
-}
-
-</script>
+const onRightClickDate = (e: MouseEvent, cell: CalRightClickEvent) => {
+  emits("rightClick", e, cell);
+};
+</script>

package/templates/nuxt/components/chart/card.vue._eta

@@ -0,0 +1,32 @@
+<template >
+    <div class="rounded-lg  h-20 p-2" @click="showCartDialog">
+        <div class="line-clamp-1 text-sm md:text-base">{{ title }}</div>
+        <div class="text text-2xl md:text-3xl text-right">
+            <slot name="default"></slot>
+        </div>
+        <Dialog  v-model:visible="dialogVisiable" modal :header="title">
+            <slot name="dialogbody">
+                define {{title}} body
+            </slot>
+        </Dialog>
+    </div>
+    
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-03-02
+ * author: Ks Tan
+ */
+
+const props = defineProps<{
+    title:string,
+    showDialog?:boolean
+    }>()
+const dialogVisiable = ref(false)
+const showCartDialog = () =>{
+    console.log("showCartDialogshowCartDialog")
+    if(props.showDialog) dialogVisiable.value=true
+}
+</script>

package/templates/nuxt/components/event/EventDocumentViewer.vue._eta

@@ -1,23 +1,24 @@
-<template>  
-  <OverlayViewer v-model="visible" :close-event-name="initDocumentName"  >
+<template>
+  <OverlayViewer v-model="visible">
     <!-- <template #header>
       
     </template> -->
-      <div class="w-full h-full ">
-          <div class="flex flex-row gap-4">
-            <Chip
+    <div class="w-full h-full">
+      <!-- <div class="flex flex-row gap-4" v-if="allview.length>0">
+            <Chip              
               v-for="(v, k) in allview"
               :label="v.label"
               @remove="deleteTab"
               :removable="true"
             />
-          </div>
-        
-        <div
-          v-for="(v, k) in allview"
-          v-memo="[k]"
-          class="viewer-item flex flex-col"
-        >
+          </div> -->
+
+      <div
+        v-for="(v, k) in allview"
+        v-memo="[k]"
+        class="viewer-item flex flex-col"
+      >
+        <div>
           <component
             :is="defineAsyncComponent(v.viewer)"
             :_id="v._id"
@@ -30,10 +31,11 @@
           />
         </div>
       </div>
+    </div>
   </OverlayViewer>
 </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
@@ -42,17 +44,22 @@
 import { onKeyStroke } from "@vueuse/core";
 import { useDialog } from "primevue/usedialog";
 import { defineAsyncComponent } from "vue";
-import { ViewRecord,FormCrudEvent } from "~/types";
+import { ViewRecord, FormCrudEvent } from "~/types";
 // import TabView from 'primevue/tabview';
 import Chip from "primevue/chip";
 
 const { $listen } = useNuxtApp();
-const initDocumentName = ref('')
 const visible = ref(false);
 const allview = ref<{ [key: string]: ViewRecord }>({});
-const after = (v: ViewRecord, eventType: FormCrudEvent, data: any, result: any) => {
+const after = (
+  v: ViewRecord,
+  eventType: FormCrudEvent,
+  data: any,
+  result: any,
+) => {
   if (v.after) {
-    v.after(eventType, data, result);
+    v.after(eventType, data);
+    
     //only after mount consider no remove tab
     if (eventType != "mount") deleteTab();
   }
@@ -67,20 +74,36 @@ const deleteTab = () => {
   const keys = Object.keys(allview.value);
   const lastkey = keys[keys.length - 1];
   delete allview.value[lastkey];
-  console.log("DeleteTab",allview.value)
+
   // updateprops.value++
   if (Object.keys(allview.value).length == 0) {
     visible.value = false;
-    useNuxtApp().$event('CloseDialog','viewer')
+    useNuxtApp().$event("CloseDialog", "viewer");
     return;
   }
 };
 
-$listen("ViewRecord", (setting) => {  
-  if(initDocumentName.value=='') initDocumentName.value= setting.documentName
+$listen("ViewRecord", (setting) => {
   visible.value = true;
   allview.value[setting.eventId] = setting;
 });
+
+$listen("CloseDialog", (documentName: string) => {
+  if (!documentName) return;
+  const keys = Object.keys(allview.value);
+  const lastkey = keys[keys.length - 1];
+  if (
+    allview.value[lastkey] &&
+    allview.value[lastkey].documentName == documentName
+  ) {
+    deleteTab();
+  }
+});
+// $listen('C' (setting) => {
+//   if(initDocumentName.value=='') initDocumentName.value= setting.documentName
+//   visible.value = true;
+//   allview.value[setting.eventId] = setting;
+// });
 </script>
 
 <style scoped>

package/templates/nuxt/components/event/EventNotification.vue._eta

@@ -1,121 +1,133 @@
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * This file was automatically generated by simpleapp generator during initialization.
  * --remove-this-line-to-prevent-override--
- * last change 2024-02-22
+ * last change 2023-03-02
  * author: Ks Tan
  */
-import {Notification, NotificationStatus} from '~/types'
+import { Notification, NotificationStatus } from "~/types";
 //import { useToast, } from 'primevue/usetoast';
-import type {  ToastMessageOptions } from 'primevue/toast';
-import Toast from 'primevue/toast';
-import { stringify } from 'ajv';
-import {upperFirst, last } from 'lodash'
-
+import type { ToastMessageOptions } from "primevue/toast";
+import Toast from "primevue/toast";
+import { stringify } from "ajv";
+import { upperFirst, last } from "lodash";
 
 const toast = useToast();
-const { $event,$listen } = useNuxtApp()
+const { $event, $listen } = useNuxtApp();
 // WildcardHandler<Record<EventType, unknown>>
-let resmsg:ToastMessageOptions = {} as ToastMessageOptions
-const eventdata=ref()
-$listen("Notification",(data:Notification)=>{
-    // $listen('*',(type:key of EventType,data:any)=>{ 
-        eventdata.value= data
-    const type:NotificationStatus = data.status
-    // let arrupdate = type.split(':')
-    // let eventdata = data
-    let duration = 3000
-    // let severity:typeof resmsg['severity'] 
-    // let isshow=true
-    let toastgroup='default'
-    // let eventname = arrupdate[1]
-    // let eventtype = arrupdate[0]
-    // let title = ''
-    switch(type){
-        case NotificationStatus.success:
-            duration = 3000
-        break;
-        case NotificationStatus.error:
-            duration = 0
-        break;
-        case NotificationStatus.warn:
-            duration = 5000
-        break;
-        case NotificationStatus.info:
-            duration = 3000
-        break;
-
-    }
-    // if(type=='error'){
-    //     duration = 0
-    //     severity='error'
-    //     title=upperFirst(eventname) +' failed'
-    // }
-    // else if(type.indexOf('warn')>=0){
-    //     duration = 10000
-    //     severity='warn'
-    //     title=upperFirst(eventname) +' with warning'
-    // }
-    // else if(type.indexOf('info')>=0){
-    //     duration = 3000
-    //     severity='info'
-    //     isshow=false
-    //     title='Info'
-    // }
-    // else if(type.indexOf('success')>=0){
-    //     duration = 3000
-    //     severity='success'
-    //     title= upperFirst(eventname) +' successfully'
-    // }
-    // if(Array.isArray(data)){
-    //     toastgroup='list'
-    // }else if(typeof data == 'object'){
-    //     // title = camelCaseToWords(useCamelCase(title.replace(":","-")))
-    //     eventdata = data.message
-    // }
-    
-    
-    // if(isshow && severity){
-    //     console.log("isshow",isshow,"event:",severity,eventdata)
-         toast.removeAllGroups()
-        resmsg = { severity: type as typeof resmsg['severity'], summary: data.summary, detail :data.data, life: duration, group:toastgroup}
-        toast.add(resmsg)
-    // }
-    // isshow=false
-    
-})
+let resmsg: ToastMessageOptions = {} as ToastMessageOptions;
+const eventdata = ref();
+$listen("Notification", (data: Notification) => {
+  // $listen('*',(type:key of EventType,data:any)=>{
+  // mobile ui dont want to show notification
+  // if (isMobile()) return false;
+  eventdata.value = data;
+  const type: NotificationStatus = data.status;
+  // let arrupdate = type.split(':')
+  // let eventdata = data
+  let duration = 3000;
+  // let severity:typeof resmsg['severity']
+  // let isshow=true
+  let toastgroup = "default";
+  // let eventname = arrupdate[1]
+  // let eventtype = arrupdate[0]
+  // let title = ''
+  switch (type) {
+    case NotificationStatus.success:
+      duration = 3000;
+      break;
+    case NotificationStatus.error:
+      duration = 0;
+      break;
+    case NotificationStatus.warn:
+      duration = 5000;
+      break;
+    case NotificationStatus.info:
+      duration = 3000;
+      break;
+  }
+  // if(type=='error'){
+  //     duration = 0
+  //     severity='error'
+  //     title=upperFirst(eventname) +' failed'
+  // }
+  // else if(type.indexOf('warn')>=0){
+  //     duration = 10000
+  //     severity='warn'
+  //     title=upperFirst(eventname) +' with warning'
+  // }
+  // else if(type.indexOf('info')>=0){
+  //     duration = 3000
+  //     severity='info'
+  //     isshow=false
+  //     title='Info'
+  // }
+  // else if(type.indexOf('success')>=0){
+  //     duration = 3000
+  //     severity='success'
+  //     title= upperFirst(eventname) +' successfully'
+  // }
+  // if(Array.isArray(data)){
+  //     toastgroup='list'
+  // }else if(typeof data == 'object'){
+  //     // title = camelCaseToWords(useCamelCase(title.replace(":","-")))
+  //     eventdata = data.message
+  // }
 
+  // if(isshow && severity){
+  //     console.log("isshow",isshow,"event:",severity,eventdata)
+  toast.removeAllGroups();
+  resmsg = {
+    severity: type as (typeof resmsg)["severity"],
+    summary: data.summary,
+    detail: data.data,
+    life: duration,
+    group: toastgroup,
+  };
+  toast.add(resmsg);
+  // }
+  // isshow=false
+});
 
-const getFieldName = (path:string)=>{
-    const lastword :string= last<string>(path.split('/'))??''
-    return camelCaseToWords(lastword)
-    // const lastField = path.split
-}
+const getFieldName = (path: string) => {
+  const lastword: string = last<string>(path.split("/")) ?? "";
+  return camelCaseToWords(lastword);
+  // const lastField = path.split
+};
 </script>
 <template>
-    <Toast group="default">
-        <template #message="p">
-            <div class="h-full w-full border">
-                <p class="text-lg text-red-800 font-semibold pb-1">{{ p.message.summary }}</p>              
-                <div v-if="p.message.detail" class="flex flex-col gap-2 ">                            
-                    <p v-if="Array.isArray(p.message.detail)"  v-for="item in p.message.detail"
-                        class="text-sm text-red-600  font-normal">
-                        <span v-if="item.instancePath">{{ item.instancePath }}&nbsp;</span>
-                        <span v-if="item.message"> {{ item.message }}&nbsp;</span>
-                        
-                    </p>
-                    <p v-else-if="typeof p.message.detail == 'string'" class="text-sm text-gray-600 dark:text-gray-400 font-normal">
-                        {{ p.message.detail }}
-                    </p>
-                    <p v-else-if="typeof p.message.detail == 'object'" class="text-sm text-gray-600 dark:text-gray-400 font-normal">
-                        {{ p.message.detail.message }}
-                    </p>
-                    <p v-else></p>
-                </div>
-
-            </div>
-        </template>
-        <!-- <template #message="p">
+  <Toast group="default">
+    <template #message="p">
+      <div class="h-full w-full border">
+        <p class="text-lg text-red-800 font-semibold pb-1">
+          {{ p.message.summary }}
+        </p>
+        <div v-if="p.message.detail" class="flex flex-col gap-2">
+          <p
+            v-if="Array.isArray(p.message.detail)"
+            v-for="item in p.message.detail"
+            class="text-sm text-red-600 font-normal"
+          >
+            <span v-if="item.instancePath">{{ item.instancePath }}&nbsp;</span>
+            <span v-if="item.message"> {{ item.message }}&nbsp;</span>
+          </p>
+          <p
+            v-else-if="typeof p.message.detail == 'string'"
+            class="text-sm text-gray-600 dark:text-gray-400 font-normal"
+          >
+            {{ p.message.detail }}
+          </p>
+          <p
+            v-else-if="typeof p.message.detail == 'object'"
+            class="text-sm text-gray-600 dark:text-gray-400 font-normal"
+          >
+            {{ p.message.detail.message }}
+          </p>
+          <p v-else></p>
+        </div>
+      </div>
+    </template>
+    <!-- <template #message="p">
             
             <div class="bg-gray-200 dark:bg-gray-900 h-full w-full border">                
                 <div class=" flex content content-end w-full">
@@ -148,8 +160,8 @@ const getFieldName = (path:string)=>{
                 </div>
             </div>
         </template> -->
-    </Toast>
-    <!-- <Toast group="list">
+  </Toast>
+  <!-- <Toast group="list">
         <template #message="p">
             <div class="bg-gray-200 dark:bg-gray-900 h-full">
                 <div class="relative mx-auto flex justify-center sm:justify-end pt-16 sm:pt-6 pb-6 sm:pb-16 h-64 overflow-x-hidden">