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

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

@@ -1,38 +1,36 @@
-<template> 
-    <VueCal        
-        :id="id"
-        ref="vueresourcecal"
-        :disable-views="['years', 'year', 'month', 'week']"
-        :time-from="8 * 60"
-        :time-to="22 * 60"
-        :time-step="60"
-        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-click="onCellClick"
-        @cell-contextmenu="eventHappend"
-        
-    >
-        <!-- header template -->
-        <template #split-label="{ split, view }">
-        <div
-            @click="clickResource(split._id, split.label)"
-            class="cursor-pointer"
-        >
-            <!-- <div
+<template>
+  <VueCal
+    :id="id"
+    ref="vueresourcecal"
+    :disable-views="['years', 'year', 'month', 'week']"
+    :time-from="8 * 60"
+    :time-to="22 * 60"
+    :time-step="60"
+    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
+    :selected-date="selectedDate"
+    :drag-to-create-threshold="15"
+    :on-event-click="onEventClick"
+    
+    @event-drag-create="onDragNew"
+    @event-drop="onEventDrop"
+    @view-change="viewChange"
+    @cell-click="onCellClick"
+    @cell-contextmenu="eventHappend"
+  >
+    <!-- header template -->
+    <template #split-label="{ split }">
+      <div
+        @click="clickResource(split._id, split.label)"
+        class="cursor-pointer"
+      >
+        <!-- <div
             v-if="resourceType == CalResourceType.teacher && split.email"
             class="w-full text-center"
             >
@@ -40,153 +38,173 @@
                 :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>
+          {{ split.displayName }}
+          <span v-if="split._id == '?'" class="pi pi-plus"></span>
         </div>
-        </template>
+        <!-- </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>
+    <!-- event template -->
+    <!--  @contextmenu="onRightClick($event, event)" -->
+    <template #event="{ event }">
+      <div class="cursor-pointer h-full">
+        <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">
 /**
- * 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 "vue-cal/dist/vuecal.css";
+
 import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
-import { CalEventType,CalViewClickSlotEvent,CalResource,CalResourceType,RelocateEvent } from '~/types'
+import {
+  CalEventType,
+  CalViewClickSlotEvent,
+  CalResource,
+  CalResourceType,
+  RelocateEvent,
+} from "~/types";
 import { emit } from "process";
-import moment from 'moment'
-const timezoneoffset = new Date().getTimezoneOffset() 
-const eventsdata = ref<CalEventType<T>[]>()
-const vueresourcecal = ref()
-const emits = defineEmits(['eventRghtClick','eventClick','eventDrop','eventDragNew','viewChange','resourceClick','slotClick'])
+import moment from "moment";
+const timezoneoffset = new Date().getTimezoneOffset();
+const eventsdata = ref<CalEventType<T>[]>();
+const vueresourcecal = ref();
+const emits = defineEmits([
+  "eventRightClick",
+  "eventClick",
+  "eventDrop",
+  "eventDragNew",
+  "viewChange",
+  "resourceClick",
+  "slotClick",
+]);
 const props = defineProps<{
-    id:string    
-    items:CalEventType<T>[]
-    resources:CalResource[]
-    resourceType:CalResourceType
-}>()
-const selectedDate = defineModel<Date>()
-const selectedSchedule = ref<CalResource>();
-
+  id: string;
+  items: CalEventType<T>[];
+  resources: CalResource[];
+  resourceType: CalResourceType;
+}>();
+const selectedDate = defineModel<Date>();
+const selectedSchedule = ref<CalEventType<T>>();
+const allEvents = ref<CalEventType[]>([]);
 
+const mapEvents = () => {
+  allEvents.value = 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;
+  });
+};
 
-const allevents = computed(()=>{  
+const eventHappend = (e: any) => {
+  console.log("eventHappend", e);
+  // alert("event happend")
+};
+const viewChange = (e: any) => {
+  selectedDate.value = e.startDate;
+  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 onCellClick = async (e: CalViewClickSlotEvent) => {
+  const date = e.date;
+  date.setHours(date.getHours() + Math.floor(date.getMinutes() / 60));
+  date.setMinutes(0, 0, 0); // Resets also seconds and milliseconds
 
-    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 onCellClick = async(e:CalViewClickSlotEvent)=>{    
-    const date =e.date
-    date.setHours(date.getHours() + Math.floor(date.getMinutes()/60));
-    date.setMinutes(0, 0, 0); // Resets also seconds and milliseconds
-    
-    
-    const newevent:CalEventType<T> = {
-        id: 'new',
-        start: date,
-        end: date.addHours(1),
-        class: 'nostudent',
-        title: t('new'),
-        // content?: string | undefined;
-        split: e.split,
-        data: {} as T
-    }
-    // emits('slotClick',e)
-    emits('eventDragNew',newevent)
-}
-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 newevent: CalEventType<T> = {
+    id: randomUUID(),
+    start: date.format("YYYY-MM-DD HH:mm"),
+    end: date.addHours(1).format("YYYY-MM-DD HH:mm"),
+    class: "nostudent",
+    title: t("new"),
+    // content?: string | undefined;
+    split: e.split,
+    data: { _id: randomUUID(), day: "tue" } as T,
+  };
+  // emits('slotClick',e)
+  // console.log("Before add ",allEvents.value)
+  allEvents.value.push(newevent);
+  setTimeout(() => {
+    mapEvents();
+  }, 300);
+  // console.log("after add ",allEvents.value)
+  emits("eventDragNew", newevent);
+};
+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) => {
+const onRightClick = (clickevent: any, scheduledata: CalEventType<T>) => {
   selectedSchedule.value = scheduledata;
-  emits('eventRghtClick', clickevent,scheduledata)
+  emits("eventRightClick", clickevent, scheduledata);
 };
-const onEventClick = (eventdata: CalResource) => {
+const onEventClick = (eventdata: CalEventType<T>, e:MouseEvent) => {
   selectedSchedule.value = eventdata;
-  emits('eventClick',eventdata)
+  emits("eventClick", eventdata,e);
+  // e.stopPropagation();
 };
 
-const calendarMode = computed(()=>{
-    
-    if(useDevice().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>
+const calendarMode = computed(() => {
+  if (useDevice().isMobile) {
+    return {
+      title: false,
+      drag: true,
+      resize: false,
+      delete: false,
+      // create: true,
+    };
+  } else {
+    return {
+      title: false,
+      drag: true,
+      resize: false,
+      delete: false,
+      create: true,
+    };
+  }
+});
+onMounted(() => {
+  mapEvents();
+  watch(
+    () => props.items,
+    () => mapEvents(),
+  );
+});
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <vue-cal
+  <VueCal
     :id="id"
     class="w-full"
     hide-view-selector
@@ -20,7 +20,7 @@
       <div @click="chooseDate(new Date(), true)">{{ t("today") }}</div>
     </template>
     <template #cell-content="{ cell, events }">
-      <div @contextmenu="(mouseevent) => onRightclickDate(mouseevent, cell)">
+      <div>
         <div>
           <s
             v-if="dateExists(new Date(cell.formattedDate), alloffdays)"
@@ -42,7 +42,7 @@
         </div>
       </div>
     </template>
-  </vue-cal>
+  </VueCal>
 </template>
 <script lang="ts" setup generic="T">
 /**
@@ -51,7 +51,9 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
-import VueCal, { Event, SplitDaysAttributes } from "vue-cal";
+//, { Event, SplitDaysAttributes }
+import VueCal from "vue-cal";
+import "vue-cal/dist/vuecal.css";
 import {
   CalEventType,
   CalRightClickEvent,
@@ -82,9 +84,9 @@ const allevents = computed(() => {
 const viewChange = (event: CalViewChange) => {
   viewStatus.value = event;
 };
-const chooseDate = (date1: Date, force?: boolean) => {  
+const chooseDate = (date1: Date, force?: boolean) => {
   if (force || !viewStatus.value || viewStatus.value.view == "month") {
-    selectedDate.value = date1;    
+    selectedDate.value = date1;
     emits("chooseDate", date1);
   }
 };

package/templates/nuxt/components/form/FormDocnoformat.vue.eta

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <title v-if="id">{{ data.docNoFormatName ?? data.docNoFormatNo }}</title>
+
+    <SimpleAppForm #default="o" :document="doc">
+      <SimpleAppFormToolBar
+        :document="doc"
+        @on="actionListener"
+      ></SimpleAppFormToolBar>
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-2"
+      >
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.autocomplete"
+          :setting="o.getField('#/properties/branch')"
+          v-model="data.branch"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/docNoFormatNo')"
+          v-model="data.docNoFormatNo"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/docNoFormatName')"
+          v-model="data.docNoFormatName"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.checkbox"
+          :setting="o.getField('#/properties/active')"
+          v-model="data.active"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.checkbox"
+          :setting="o.getField('#/properties/default')"
+          v-model="data.default"
+        />
+
+        <SimpleAppInput
+          :readonly="!doc.isNew()"
+          :input-type="SimpleAppInputType.select"
+          :setting="o.getField('#/properties/docNoType')"
+          :options="getAllDocFormats().map((item) => item.docType)"
+          v-model="data.docNoType"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/docNoPattern')"
+          v-model="data.docNoPattern"
+          @keyup="updateSample"
+          :description="sample"
+          v-tooltip="'Examples: PO-[00000], SI{YY}/[000], SI{YYMM}/[000]'"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.number"
+          :setting="o.getField('#/properties/nextNumber')"
+          v-model="data.nextNumber"
+        />
+      </div>
+    </SimpleAppForm>
+    <DebugDocumentData v-model="data" :label="doc.getDocName()" />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator.
+ * last change 2024-02-16
+ * Author: Ks Tan
+ */
+import { SimpleAppInputType, FormCrudEvent } from "~/types";
+import { Docnoformat } from "~/simpleapp/generate/types";
+import { DocnoformatDoc } from "~/simpleapp/docs/DocnoformatDoc";
+
+const props = defineProps<{
+  _id?: string;
+  doc?: DocnoformatDoc;
+  paras?: Docnoformat;
+}>();
+
+const doc = props.doc ?? useNuxtApp().$DocnoformatDoc();
+const data = doc.getReactiveData();
+const sample = ref("");
+const emits = defineEmits(["after"]);
+const id = computed(() => props._id ?? "");
+
+/************ start default methods ****************/
+
+const newData = () => doc.setNew();
+
+const getRecord = async () => {
+  if (id.value && id.value != "new") {
+    await doc.getById(id.value);
+  } else {
+    newData();
+  }
+};
+
+getRecord();
+watch(id, async () => await getRecord());
+/************ end default methods ****************/
+
+const actionListener = async (actionName: string) => {
+  emits("after", actionName, data.value);
+};
+
+onMounted(async () => {
+  await actionListener(FormCrudEvent.mount);
+  setTimeout(() => {
+    updateSample();
+  }, 300);
+});
+/************ start api methods ****************/
+
+// const runListDocFormats = async () => {
+//   const data = {
+//     id: id.value,
+//   };
+//   const result = await doc.runListDocFormats(
+//     doctype,
+
+//     data,
+//   );
+// };
+/************ end api methods ****************/
+const updateSample = () => {
+  sample.value = "Example: " + previewDocNo();
+};
+
+const previewDocNo = (): string => {
+  const pattern = data.value.docNoPattern;
+  if (pattern) {
+    const numberReg: RegExp = /\[(.*?)\]/g;
+    const dateReg: RegExp = /\{(.*?)\}/g;
+    let newvalue = pattern;
+    const numberpattern = pattern.match(numberReg);
+    const datepattern = pattern.match(dateReg);
+
+    if (numberpattern && numberpattern.length > 0) {
+      const numberlength = numberpattern[0]
+        .replace("[", "")
+        .replace("]", "").length;
+
+      let nextnumber = (data.value.nextNumber ?? 0).toString();
+
+      const numberdiff = numberlength - nextnumber.length;
+
+      for (let n = 0; n < numberdiff; n++) {
+        nextnumber = "0" + nextnumber;
+      }
+      newvalue = newvalue.replace(numberpattern[0], nextnumber);
+    }
+
+    if (datepattern && datepattern.length > 0) {
+      for (let d = 0; d < datepattern.length; d++) {
+        const dpattern = datepattern[d];
+        const date = new Date();
+        const formatteddate = getDayJs()().format(
+          dpattern.replace("{", "").replace("}", ""),
+        );
+        newvalue = newvalue.replace(dpattern, formatteddate);
+      }
+    }
+    return newvalue;
+  } else {
+    return "";
+  }
+};
+</script>