@simitgroup/simpleapp-generator 1.2.6 → 1.2.7

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

@@ -0,0 +1,167 @@
+<template> 
+    {{ calendarMode }}
+    <VueCal
+        :id="id"
+        :disable-views="['years', 'year', 'month', 'week']"
+        :time-from="8 * 60"
+        :time-to="20 * 60"
+        :time-step="30"
+        active-view="day"
+        :snap-to-time="15"
+        hide-view-selector
+        :events="allevents"
+        :editable-events="calendarMode"
+        :split-days="allresources"
+        :min-split-width="100"
+        
+        :sticky-split-labels="true"
+        sticky-split-labels
+        
+        :selected-date="selectedDate"
+        :drag-to-create-threshold="15"        
+        @event-drag-create="onDragNew"
+        @event-drop="onEventDrop"
+        @view-change="viewChange"
+        
+        @cell-contextmenu="eventHappend"
+        
+    >
+        <!-- header template -->
+        <template #split-label="{ split, view }">
+        <div
+            @click="clickResource(split._id, split.label)"
+            class="cursor-pointer"
+        >
+            <!-- <div
+            v-if="resourceType == CalResourceType.teacher && split.email"
+            class="w-full text-center"
+            >
+            <img
+                :src="getAvatarLink(split.email, 48)"
+                class="overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow"
+            /> -->
+            <div>{{ split.displayName }} <span v-if="split._id == '?'" class="pi pi-plus"></span></div>
+            <!-- </div>
+            <div v-else>{{ split.displayName }}</div> -->
+            
+        </div>
+        </template>
+
+        <!-- event template -->
+        <!--  @contextmenu="onRightClick($event, event)" -->
+        <template #event="{ event, view }">
+            <div 
+                @click="onRightClick($event,event)"
+                class="cursor-pointer"
+            >            
+            <slot name="default" :event="<CalEventType<T>>event">
+                <div>{{ event.title }}</div>
+                <div>{{ event.start }}</div>
+                <div>{{ event.end }}</div>
+            </slot>                
+            </div>
+        </template>
+    </VueCal>
+</template>
+<script setup lang="ts" generic="T">
+
+
+import "vue-cal/dist/vuecal.css";
+import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
+import { CalEventType,CalRightClickEvent,OffDay,CalResource,CalResourceType,RelocateEvent } from '~/types'
+import { emit } from "process";
+
+const timezoneoffset = new Date().getTimezoneOffset() 
+const eventsdata = ref<CalEventType<T>[]>()
+const emits = defineEmits(['eventRghtClick','eventClick','eventDrop','eventDragNew','viewChange','resourceClick'])
+const props = defineProps<{
+    id:string    
+    items:CalEventType<T>[]
+    resources:CalResource[]
+    resourceType:CalResourceType
+}>()
+const selectedDate = defineModel<Date>()
+const selectedSchedule = ref<CalResource>();
+
+
+
+const allevents = computed(()=>{  
+
+    const list =  props.items.map(item=>{                           
+        if(item.start instanceof Date) item.start =item.start.addMinutes(timezoneoffset).format('YYYY-MM-DD HH:mm')            
+        if(item.end instanceof Date) item.end = item.end.addMinutes(timezoneoffset).format('YYYY-MM-DD HH:mm')
+        if(!item.split) item.split='?'         
+        return item
+    })
+    return list
+})
+const eventHappend  = (e:any)=>{
+    console.log("event happen eee",e)
+    // alert("event happend")
+}
+const viewChange = (e:any)=>{
+    console.log("calendar view change",e)
+    selectedDate.value=e.startDate
+    // endDate :  Sat Feb 17 2024 23:59:59 GMT+0800 (Malaysia Time) {}
+    // events :  []
+    // startDate :  Sat Feb 17 2024 00:00:00 GMT+0800 (Malaysia Time) {}
+    // view :  "day"
+    emits('viewChange',e)
+}
+const allresources = computed(()=>{    
+    const tmplist = props.resources.map(r=>{
+        if(!r.id) r.id =r._id
+        if(r.hide===undefined) r.hide=false
+        if(!r.displayName) r.displayName=r.label
+        return r
+    })
+    tmplist.push({
+        _id:'?',
+        id:'?',
+        hide:false,
+        label:t('unknown'),
+        displayName:t('unknown'),
+        code:'',
+        email:'',
+    })
+    return tmplist
+})
+const onEventDrop = async (relocateData: RelocateEvent<T>)=>{
+    emits('eventDrop', relocateData)
+}
+const clickResource = async (splitid:string, splitlabel:string)=> emits('resourceClick', splitid,splitlabel)
+const onDragNew = (e: CalEventType<T>)=> emits('eventDragNew', e)
+
+const onRightClick = (clickevent: any, scheduledata: any) => {
+  selectedSchedule.value = scheduledata;
+  emits('eventRghtClick', clickevent,scheduledata)
+};
+const onEventClick = (eventdata: CalResource) => {
+  selectedSchedule.value = eventdata;
+  emits('eventClick',eventdata)
+};
+
+const calendarMode = computed(()=>{
+    
+    if(isMobile()){
+        return {
+            title: false,
+            drag: true,
+            resize: false,
+            delete: false,
+            // create: true,
+        }
+    }else{
+      return  {
+            title: false,
+            drag: true,
+            resize: false,
+            delete: false,
+            create: true,
+        }
+    }
+    
+})
+
+
+</script>

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

@@ -0,0 +1,74 @@
+<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>
+<script lang="ts" setup generic="T">
+import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
+import { CalEventType,CalRightClickEvent,OffDay } from '~/types'
+
+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);
+};
+const chooseDate = (date1: Date) => {
+  selectedDate.value = date1;
+  emits('chooseDate',selectedDate.value)
+};
+const onRightClickDate=(e: MouseEvent,cell:CalRightClickEvent)=>{    
+    emits('rightClick',e,cell)
+}
+
+</script>

package/templates/nuxt/components/docPage/DocPageList.vue.eta

@@ -1,8 +1,27 @@
+
+<template>
+    <div class="simpleapp-crudsimple">    
+          <TableDocuments :value="recordlist" :columns="columns" :title="doc.getDocName()" > 
+            <template #toolbar>
+                <div class="w-full text-left">
+                    <Button class=" btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">{{ t('new') }}</Button>
+                </div>                
+            </template>
+            <template #additionaltoolbar>
+                <Button class="bg-secondary-600 hover:bg-secondary-400 text-white" @click="refresh()" type="button" >{{ t('refresh') }}</Button>                                                                            
+            </template>
+          </TableDocuments>  
+          <Dialog v-model:visible="showDialog" modal>
+            <NuxtPage :_id="id" @after="after"></NuxtPage>
+          </Dialog>
+    </div>            
+    
+</template>
 <script setup lang="ts">
 /**
 * This file was automatically generated by simpleapp generator during initialization.
  * DO NOT MODIFY IT BY HAND.
- * last change 2023-09-09
+ * last change 2024-02-04
  * author: Ks Tan
  */
 import {ref} from 'vue'
@@ -10,20 +29,15 @@ import _ from 'lodash'
 import { SimpleAppClient } from  '~/simpleapp/generate/clients/SimpleAppClient' //'../SimpleAppClient';
 
 import {SearchBody,CellSetting} from '~/types'
-const props = withDefaults(defineProps<{
+const props = defineProps<{
     document:SimpleAppClient<any,any>
-    columns:CellSetting[]    
-    layoutClass?:string
-    col1Class?:string
-    col2Class?:string
+    columns:CellSetting[]        
     sorts?: string[][]
-}>(),{
-  layoutClass:'grid grid-cols-2',
-  col1Class:'p-4',
-  col2Class:'p-4'
-})
+}>()
+const id= computed(()=>getPathPara('id'))
 const resourcename = ref( _.upperFirst(props.document.getDocName()))
 const visible = ref(false)
+const showDialog = ref(false);
 const doc = props.document
 const data = doc.getReactiveData()
 const disabled=ref(false)
@@ -84,34 +98,28 @@ const getWantedFields = (selectedCols:CellSetting[]) =>{
         return cols
     }
 
-const selectRow =  (data:any) =>{  
-  console.log("select row",data)
-  goTo(doc.getDocName(),data._id)  
+watch(showDialog,()=>{
+  if(!showDialog.value){
+    goTo(props.document.getDocName())
+  }
+})
+watch(()=>useRoute().path, async()=>{
+  if(getPathPara('id')){
+    showDialog.value=true
+  }else{
+    showDialog.value=false
+  }
+})
+const after = (eventType:string)=>{
+  if(eventType!='mount') goTo(resourcename.value)
+  //showDialog.value=false
 }
+onMounted(()=>{
+  if(id.value){
+    showDialog.value=true
+  }else{
+    showDialog.value=false
+  }
+})
 </script>
- 
-<template>
-    <div class="simpleapp-crudsimple">    
-      <h1 v-if="systemwindows" class="error-text text-center">* system administration screen</h1>      
-      <div :class="layoutClass">
-        <div v-if="recordlist" :class="col1Class">
-          <TableDocuments :value="recordlist" :columns="columns" :title="doc.getDocName()"  @select-row="selectRow"> 
-            <template #toolbar>
-                <div class="w-full text-left">
-                    <Button class=" btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">{{ t('new') }}</Button>
-                </div>                
-            </template>
-            <template #additionaltoolbar>
-                <Button class="bg-secondary-600 hover:bg-secondary-400 text-white" @click="refresh()" type="button" >{{ t('refresh') }}</Button>                                                                            
-            </template>
-        </TableDocuments>  
-      
-        </div>
-        <div :class="col2Class">
-          <slot>
-              undefine page content
-          </slot> 
-        </div>
-      </div>            
-    </div>
-</template>
+ 

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

@@ -2,9 +2,7 @@
     <Dialog v-model:visible="visible"         
         :pt="{root:{class:'w-5/6 h-5/6'}}"
         :modal="true" 
-        :close-on-escape="false" >                
-        
-
+        :close-on-escape="false" >                        
         <template #header>
             <div class="flex flex-row gap-4">
                 <Chip v-for="(v,k) in allview" :label="v.label" @remove="deleteTab" :removable="true"
@@ -16,8 +14,9 @@
                     <component                             
                         :is="defineAsyncComponent(v.viewer)" 
                         :_id="v._id" 
-                        :readonly="v.readonly" 
-                        @after-create="callback(v,$event)" 
+                        :readonly="v.readonly"   
+                        :paras="v.paras"                      
+                        @after="(eventType:string,data:any,result:any)=>after(v,eventType,data,result)"
                             />
             </div>
         </template>                
@@ -41,13 +40,14 @@ import Chip from 'primevue/chip';
 const {$listen,} = useNuxtApp()
 const visible = ref(false)
 const allview = ref<{[key:string]:ViewRecord}>({})
-
-const callback = (v:ViewRecord,data:any)=>{
-    if(v.afterCreate){
-        v.afterCreate(data)
+const after = (v:ViewRecord,eventType:string,data:any,result:any)=>{
+    if(v.after){        
+        v.after(eventType,data,result)
+        //only after mount consider no remove tab
+        if(eventType!='mount') deleteTab()
     }
-    deleteTab()
 }
+
 onKeyStroke('Escape', (e) => {
   e.preventDefault()
   deleteTab()

package/templates/nuxt/components/header/HeaderBar.vue._eta

@@ -1,10 +1,3 @@
-<script setup lang="ts">
-//import ButtonMenuPicker from "./ButtonMenuPicker.vue"
-
-//import ButtonProfile from './ButtonProfile.vue';
-
-
-</script>
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
@@ -13,23 +6,30 @@
         
         
         <div class="flex-1 flex flex-row gap-2 p-2">
-            <div class="">
+            <!-- <div class="">
                 <HeaderButtonMenuPicker/>                
-            </div>     
+            </div>      -->
             
             <!-- <div class="">
                 <HeaderButtonHome/>                
             </div> -->
-            <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
+            <div v-if="isMobile()">                
+                <div v-if="useRoute().fullPath.split('/').length<=3">{{ t('home') }}</div>
+                <div v-else>{{ _.last(useRoute().fullPath.split('/'))  }}</div>
+            </div>
+            <div v-else>
+                <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
+            </div>
+            
         </div>
         <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
 
             <div class=" text-right">
                 <HeaderButtonProfile/>
             </div>
-            <div class=" text-right">
+            <!-- <div class=" text-right">
                 <HeaderButtonTaskList/>
-            </div>
+            </div> -->
             <!-- <div class="">
                 <HeaderSelectBranch/>              
             </div>         -->
@@ -41,3 +41,16 @@
     </client-only>
     <!-- </header> -->
 </template>
+
+<script setup lang="ts">
+import _ from 'lodash'
+//import ButtonMenuPicker from "./ButtonMenuPicker.vue"
+
+//import ButtonProfile from './ButtonProfile.vue';
+const pageTitle = ref<string>('')
+onMounted(()=>{
+    // useNuxtApp().$listen('SetTitle',(title:string)=>{
+        // pageTitle.value = title
+    // })
+})
+</script>

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

@@ -2,6 +2,11 @@
     <i class="pi" :class="{ 'pi-check-circle text-green-500 ': modelValue, 'pi-times-circle text-red-500': !modelValue }"></i>
 </template>
 <script lang="ts" setup>
-
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const modelValue = defineModel()
 </script>

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

@@ -2,5 +2,11 @@
     <span>{{ toLocalDate(value??'') }}</span>
 </template>
 <script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const props = defineProps<{value?:string}>()
 </script>

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

@@ -5,6 +5,12 @@
     <span v-else>{{ displayText }}</span>
 </template>
 <script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 import { ForeignKey } from '~/types';
 
 
@@ -28,7 +34,7 @@ const viewRecord = () => {
     $event('ViewRecord',{
         _id: modelValue.value?._id as string,
         label: modelValue.value?.label as string,
-        eventId: crypto.randomUUID(),
+        eventId: randomUUID(),
         documentName: props.setting.collection,
         viewer: viewer.value,
         readonly:true

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

@@ -0,0 +1,33 @@
+<template>
+    <a @click="go" class="text-primary-700 hover:text-primary-500 cursor-pointer">
+        <slot name="default">
+            <div >{{ value[fields[0]] }}</div>
+        </slot>
+    </a>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+
+const props = defineProps<{
+    fields:any,
+    setting:any,
+    value:any
+}>()
+
+const go = ()=>{
+    goTo(props.setting.path,props.value._id)
+    // useNuxtApp().$event('ViewRecord',{
+    //     _id: props.value._id ,
+    //     documentName: props.setting.documentName,
+    //     viewer: getDocument(props.setting.documentName)?.viewer,
+    //     label: props.setting.documentName,
+    //     document:getDocument(props.setting.documentName)?.docClass,
+    //     eventId: crypto.randomUUID()
+    // })
+} 
+</script>

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

@@ -1,7 +1,17 @@
 
 <template>
-    <span>{{ Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(modelValue) }}</span>
+    <span>  {{ Intl.NumberFormat('en',{
+        style:'currency',
+        currency: getUserProfile()?.currency,
+        currencyDisplay: 'symbol',        
+    }).format(modelValue) }}</span>
 </template>
 <script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const props = defineProps(['modelValue'])
 </script>

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

@@ -6,6 +6,12 @@
     </p>
 </template>
 <script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const props = defineProps(['value','fields'])
 
 </script>

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

@@ -0,0 +1,32 @@
+<template>
+    <a @click="openViewer" class="text-primary-700 hover:text-primary-500 cursor-pointer">
+        <slot name="default">
+            <div >{{ value[fields[0]] }}</div>
+        </slot>
+    </a>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+
+const props = defineProps<{
+    fields:any,
+    setting:any,
+    value:any
+}>()
+
+const openViewer = ()=>{
+    useNuxtApp().$event('ViewRecord',{
+        _id: props.value._id ,
+        documentName: props.setting.documentName,
+        viewer: getDocument(props.setting.documentName)?.viewer,
+        label: props.setting.documentName,
+        document:getDocument(props.setting.documentName)?.docClass,
+        eventId: randomUUID()
+    })
+} 
+</script>

package/templates/nuxt/components/renderer/{index.ts.eta → index.ts._eta}

@@ -1,12 +1,20 @@
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * YOU CAN MODIFY IT.
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 import RendererBoolean from './RendererBoolean.vue'
 import RendererDate from './RendererDate.vue'
 import RendererForeignKey from './RendererForeignKey.vue'
 import RendererMoney from './RendererMoney.vue'
 import RendererMultiText from './RendererMultiText.vue'
-
+import RendererViewer from './RendererViewer.vue'
+import RendererLink from './RendererLink.vue'
 
 export default {
     
-      RendererBoolean,RendererDate,RendererForeignKey,RendererMoney,RendererMultiText
+      RendererBoolean,RendererDate,RendererForeignKey,RendererMoney,RendererMultiText,RendererViewer,
+      RendererLink
     
   };

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

@@ -48,7 +48,7 @@ const queryresult = jsonpath.query(props.setting.defaultValue,modifiedpath)[0]
 const emptyautocomplete = computed(():autocompletetype=> queryresult)
 
 const autocompleteitem = ref<autocompletetype>(emptyautocomplete.value)
-const modelValue = defineModel<autocompletetype>()        
+const modelValue = defineModel<autocompletetype>({required:true})
 if(modelValue.value && modelValue.value._id){
     autocompleteitem.value={...modelValue.value}
 }
@@ -135,14 +135,14 @@ const openViewer = (readonly:boolean) =>{
         const docname = props.setting.fieldsetting['x-foreignkey']
         $event('ViewRecord',{
             _id: modelValue.value?._id as string,
-            eventId: crypto.randomUUID(),
+            eventId: randomUUID(),
             label: (readonly ? modelValue.value?.label : `${t('new') + ' '+ t(docname) }`)  as string,
             readonly:readonly,
             viewer : getDocument(docname)?.viewer,
             documentName: docname,
 
             //after create, auto copy value into auto complete
-            afterCreate:(data:any)=>{                
+            after:(eventType:string,data:any,result:any)=>{                
                 autocompleteitem.value = {
                     _id: data._id,
                     code: data[codefield],                    

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

@@ -45,7 +45,7 @@ const props = defineProps<{
 const op = ref();
 const placeholder = ref('')
 const docFormatlist = ref()
-const modelValue = defineModel<string>()
+const modelValue = defineModel<string>({required:true})
 const docNoFormat = props.setting.document.getReactiveData().value.docNoFormat
 const emits = defineEmits(['update:docNoFormat'])