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

package/templates/nuxt/components/simpleApp/{SimpleAppFormToolBar.vue.eta → SimpleAppFormToolBar.vue._eta}

@@ -1,41 +1,38 @@
 <template>
-  <div v-if="isMobile()" class="w-full">    
-    <MobileToolbar class=" bg-gray-800 text-white">
+  <div v-if="isMobile()" class="w-full">
+    <MobileToolbar class="bg-gray-800 text-white">
       <template #start>
-        <ButtonText class="text-xl" @click="callClose"
-          ><i class="pi pi-times"></i
-        ></ButtonText>
+        <slot name="start" :menu="menu">
+          <ButtonText class="text-xl" @click="callClose"
+            ><i class="pi pi-times"></i
+          ></ButtonText>
+        </slot>
       </template>
       <template #center>
-        <TextTitle class="text-white ">{{ title }}</TextTitle>
+        <slot name="center" :menu="menu">
+          <TextTitle class="text-white line-clamp-2">{{ title }}</TextTitle>
+        </slot>
       </template>
       <template #end>
-        <div class="flex flex-row-reverse gap-1 w-full">
-          <ButtonText class="text-xl" @click="toggleMenu" v-if="isShow">
-            <i class="pi pi-ellipsis-v"></i>
-          </ButtonText>
-
-          <ButtonText
-            class="text text-xl"
-            @click="
-              emitEvent(
-                {
-                  action: doc.isNew() ? 'create' : 'update',
-                  label: '',
-                  type: 'crud',
-                },
-                $event,
-              )
-            "
-          >
-            <i class="pi pi-save"></i>
-          </ButtonText>
-
-          <ContextMenu ref="menu" :model="menus as MenuItem[]" />
-        </div>
+        <slot name="end" :menu="menu">
+          <div class="flex flex-row w-full">
+            <ButtonText
+              class="text-xl"
+              @click="emitEvent(menus[0], $event)"
+              v-if="isShow"
+              v-tooltip="menus[0].label"
+            >
+              <i :class="menus[0].icon"></i>
+            </ButtonText>
+
+            <ButtonText class="text-xl" @click="toggleMenu" v-if="isShow">
+              <i class="pi pi-ellipsis-v"></i>
+            </ButtonText>
+          </div>
+        </slot>
+        <ContextMenu ref="menu" :model="menus as MenuItem[]" />
       </template>
-    </MobileToolbar>
-    <div class="h-14"></div>
+    </MobileToolbar>    
     <ConfirmDialog></ConfirmDialog>
   </div>
   <div v-else class="simpleapp-tool-bar">
@@ -43,63 +40,87 @@
       <template #start>
         <div v-for="(menu, index) in menus" :key="index">
           <div v-if="menu.label && menu.type == 'crud'">
-            <ButtonDefault @click="emitEvent(menu, $event)">{{
-              menu.label
-            }}</ButtonDefault>
+            <ButtonAction
+              @click="emitEvent(menu, $event)"
+              :action-name="menu.action"
+              >{{ menu.label }}</ButtonAction
+            >
           </div>
         </div>
       </template>
       <template #center>
+        <TextTitle class="text-white line-clamp-2">{{ title }}</TextTitle>
+      </template>
+      <template #end>
         <div v-for="(menu, index) in menus" :key="index">
           <div v-if="menu.label && menu.type == 'docstatus'">
-            <ButtonDefault @click="emitEvent(menu, $event)">{{
-              menu.label
-            }}</ButtonDefault>
+            <ButtonAction
+              @click="emitEvent(menu, $event)"
+              :action-name="menu.action"
+              >{{ menu.label }}</ButtonAction
+            >
           </div>
         </div>
       </template>
-      <template #end> </template>
     </Toolbar>
-
     <ConfirmPopup></ConfirmPopup>
   </div>
 </template>
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
- * Author: Ks Tan
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-02-22
+ * author: Ks Tan
  */
+
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
 import { useConfirm } from "primevue/useconfirm";
 import { FormActions, FormCrudEvent, FormMenu } from "~/types";
 import { MenuItem } from "primevue/menuitem";
+import { MenuItemCommandEvent } from "primevue/menuitem";
 const confirm = useConfirm();
 const emits = defineEmits(["on", "close"]);
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   disableaction?: string[];
 }>();
-const createData = async () => {try{ return await doc.create()}catch(e){console.debug('validation error:',e)}};
-const updateData = async () => {try{ return  await doc.update()}catch(e){console.debug('validation error:',e)}};
-const deleteData = async () => {try{ return  await doc.delete()}catch(e){console.debug('validation error:',e)}};
+const createData = async () => {
+  try {
+    return await doc.create();
+  } catch (e) {
+    console.debug("validation error:", e);
+  }
+};
+const updateData = async () => {
+  try {
+    return await doc.update();
+  } catch (e) {
+    console.debug("validation error:", e);
+  }
+};
+const deleteData = async () => {
+  try {
+    return await doc.delete();
+  } catch (e) {
+    console.debug("validation error:", e);
+  }
+};
 
 const doc = props.document;
 const data = doc.getReactiveData();
 type Datatype = keyof typeof data.value;
 const config = doc.getSchema()["x-simpleapp-config"];
-const titlefield = (config.documentTitle ?? config.documentTitle) as Datatype;
-const title = ref<string>(
+const titlefield = (config.uniqueKey ?? config.documentTitle) as Datatype;
+const title = computed(() =>
   data.value[titlefield as Datatype]
     ? data.value[titlefield as Datatype]
     : t(doc.getDocName()),
 );
+
 const menu = ref();
 const menus = computed(() =>
-  [...getActions(), { separator: true }, ...getDocActions()].filter((item) =>
-    showMenuButton(item),
-  ),
+  [...getActions(), ...getDocActions()].filter((item) => showMenuButton(item)),
 );
 
 const isShow = computed(
@@ -109,23 +130,22 @@ const toggleMenu = (event: MouseEvent) => {
   menu.value.toggle(event);
 };
 
-const callClose = (e: MouseEvent) => {  
+const callClose = (e: MouseEvent) => {
   useNuxtApp().$event("CloseDialog", doc.getDocName());
   emitEvent({ action: "exit", type: "menu", label: "" }, e);
   // async (menu: FormMenu, clickEvent: MouseEvent)
 };
-const emitMobileEvent = (itemevent: {
-  item: any;
-  originalEvent: MouseEvent;
-}) => {
+const emitMobileEvent = (itemevent: MenuItemCommandEvent) => {
   const actionname: string = itemevent.item.action;
   const event = itemevent.originalEvent;
-  emitEvent({ action: actionname, type: "crud", label: "" }, event);
+  // emitEvent({ action: actionname, type: "crud", label: "" }, event);
+  emitEvent(itemevent.item, event);
 };
 
 const getActions = () => {
   const actions = doc.getActions();
   const crudmenus: any[] = [];
+
   // Object.keys(actions).forEach((key)=>{ //crud, api, docstatus
   actions["crud"].forEach((item) => {
     if (props.disableaction && props.disableaction.includes(item)) {
@@ -135,6 +155,7 @@ const getActions = () => {
         action: item,
         label: t(item),
         type: "crud",
+        icon: getActionIcon(item),
         command: emitMobileEvent,
       });
     }
@@ -161,9 +182,10 @@ const emitEvent = async (menu: FormMenu, clickEvent: MouseEvent) => {
       if (await createData()) emits("on", FormCrudEvent.create);
     } else if (menu.action == "update") {
       if (await updateData()) emits("on", FormCrudEvent.update);
-    } else if (menu.type == "setDocStatus")
+    } else if (menu.type == "docstatus") {
       emits("on", FormCrudEvent.setDocStatus, menu.action);
-    else if (menu.action == FormCrudEvent.exit) emits("on", FormCrudEvent.exit);
+    } else if (menu.action == FormCrudEvent.exit)
+      emits("on", FormCrudEvent.exit);
   }
 };
 
@@ -183,21 +205,60 @@ const getDocActions = () => {
         action: item,
         label: statusNames[item],
         type: "docstatus",
+        icon: getActionIcon(item),
+        command: emitMobileEvent,
       })) ?? [];
   }
   return docactionmenus;
 };
 const showMenuButton = (menu: FormMenu) => {
   if (menu.separator) return true;
-  if (isMobile() && ["create", "update"].includes(menu.action)) return false;
-  if (!canPerform(doc.getDocName(), menu.action)) return false;
+
+  //all document status cannot direct apply regardless new or draft
+  if (menu.type == "docstatus") return true;
+
+  // afterward, new document only acces create action
   if (doc.isNew() && menu.action == "create") return true;
-  if (!doc.isNew() && menu.action == "new") return true;
-  if (!doc.isNew() && menu.action == "update") return true;
-  if (!doc.isNew() && menu.action == "delete") return true;
+  if (doc.isNew() && menu.action != "create") return false;
+
+  //start from here, readonly document all action not allow
+  if (doc.isReadOnly()) return false;
 
-  if (menu.type == "api") return false;
+  //edit draft document, only create not allow
+  if (!doc.isNew() && menu.action == "create") return false;
+  if (!doc.isNew() && menu.action != "create") return true;
 
   return false;
 };
+
+const getActionIcon = (actionName: string) => {
+  let icon = "";
+  switch (actionName) {
+    case "create":
+      icon = "pi-save";
+      break;
+    case "update":
+      icon = "pi-save";
+      break;
+    case "delete":
+      icon = "pi-trash";
+      break;
+    case "confirm":
+      icon = "pi-check";
+      break;
+    case "void":
+      icon = "pi-ban";
+      break;
+    case "print":
+      icon = "pi-print";
+      break;
+    case "draft":
+      icon = "pi-pencil";
+      break;
+    default:
+      icon = "pi-question-circle";
+      break;
+  }
+  return `pi ${icon}`;
+};
 </script>

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

@@ -10,6 +10,7 @@
     :instancepath="instancepath"
     :error="error"
     #default="slotprops"
+    :resetcount="resetcount"
   >
     <Checkbox
       v-if="inputType == SimpleAppInputType.checkbox"
@@ -20,6 +21,7 @@
       v-model="modelValue"
       :binary="true"
       v-bind="componentProps as CheckboxProps"
+      @change="onChange"
     />
     <InputSwitch
       v-else-if="inputType == SimpleAppInputType.switch"
@@ -30,8 +32,9 @@
       v-model="modelValue as boolean"
       :binary="true"
       v-bind="componentProps as InputSwitchProps"
+      @change="onChange"
     />
-
+    <!--
     <InputText
       type="date"
       :pt="pt"
@@ -43,19 +46,24 @@
       :readonly="isReadonly"
       :placeholder="placeholder"
       v-bind="componentProps as InputTextProps"
-    />
+    /> -->
     <!-- calendar component -->
     <Calendar
       type="date"
       :pt="pt"
-      class="flex flex-col"
-      v-else-if="SimpleAppInputType.calendar == inputType"
+      v-else-if="
+        SimpleAppInputType.calendar == inputType ||
+        inputType == SimpleAppInputType.date
+      "
       :inputId="slotprops.uuid"
       :path="setting.instancepath"
       v-model="datevalue"
       @update:modelValue="updateDate"
+      :touchUI="isMobile()"
+      showButtonBar
       :readonly="isReadonly"
       :placeholder="placeholder"
+      :date-format="getDateFormat()"
       v-bind="componentProps as CalendarProps"
     />
 
@@ -69,7 +77,7 @@
       @update:modelValue="updateTime"
       :inputId="slotprops.uuid"
       :path="setting.instancepath"
-      v-model="modelValue as string"
+      v-model="timevalue"
       :readonly="isReadonly"
       :placeholder="placeholder"
       v-bind="componentProps as CalendarProps"
@@ -90,6 +98,7 @@
       optionValue="value"
       :placeholder="placeholder"
       v-bind="componentProps as ListboxProps"
+      @change="onChange"
     />
 
     <Dropdown
@@ -106,6 +115,7 @@
       optionValue="value"
       :placeholder="placeholder"
       v-bind="componentProps"
+      @change="onChange"
     />
 
     <!-- radio component -->
@@ -118,6 +128,7 @@
           name="smaple"
           :value="item.value"
           :readonly="isReadonly"
+          @change="onChange"
         />
         {{ " " }}
         <label :for="setting.key + '-' + index"> {{ item.label }} </label>
@@ -136,6 +147,8 @@
       :path="setting.instancepath"
       :readonly="isReadonly"
       :placeholder="placeholder"
+      :autocompleteFilter="autocompleteFilter"
+      @change="onChange"
     />
     <!-- v-bind:attributes="componentProps" -->
     <!--  document no input-->
@@ -149,6 +162,7 @@
       :pt="pt"
       :path="setting.instancepath"
       v-bind="componentProps as any"
+      @change="onChange"
     />
     <!-- use componentProps as any at the moment, no ideal yet, and for compatibility -->
 
@@ -163,6 +177,7 @@
       class="flex flex-col"
       :inputId="slotprops.uuid"
       :path="setting.instancepath"
+      @change="onChange"
       :placeholder="placeholder"
       v-bind="componentProps as PasswordProps"
     />
@@ -176,6 +191,7 @@
       :readonly="isReadonly"
       :inputId="slotprops.uuid"
       :path="setting.instancepath"
+      @change="onChange"
       v-bind="componentProps as RatingProps"
     />
 
@@ -189,10 +205,11 @@
       :inputId="slotprops.uuid"
       :path="setting.instancepath"
       :placeholder="placeholder"
+      @update:modelValue="onChange"
       v-bind="componentProps as ChipsProps"
     />
     <!-- simple component  -->
-    
+
     <InputNumber
       v-else-if="inputType == SimpleAppInputType.number"
       :type="type"
@@ -202,10 +219,27 @@
       :pt="pt"
       :class="!pt ? 'w-full flex flex-col' : ''"
       :inputId="slotprops.uuid"
+      @update:modelValue="onChange"
       :path="setting.instancepath"
       v-bind="componentProps as InputNumber"
       :placeholder="placeholder"
     />
+    <InputNumber
+      v-else-if="inputType == SimpleAppInputType.money"
+      :type="type"
+      v-model="modelValue as number"
+      @focus="setFocus"
+      :max-fraction-digits="2"
+      :min-fraction-digits="2"
+      :readonly="isReadonly"
+      :pt="pt"
+      :class="!pt ? 'w-full flex flex-col' : ''"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      @change="onChange"
+      v-bind="componentProps as InputNumber"
+      :placeholder="placeholder"
+    />
     <Textarea
       v-else-if="inputType == SimpleAppInputType.textarea"
       v-model="modelValue as string"
@@ -216,6 +250,7 @@
       class="w-full flex flex-col"
       :inputId="slotprops.uuid"
       :path="setting.instancepath"
+      @change="onChange"
       :placeholder="placeholder"
       v-bind="componentProps as TextareaProps"
     />
@@ -229,11 +264,12 @@
       :type="type"
       class="w-full flex flex-col"
       :inputId="slotprops.uuid"
+      @change="onChange"
       :path="setting.instancepath"
       :placeholder="placeholder"
       v-bind="componentProps as InputTextProps"
     />
-    <!-- component require special treatment -->        
+    <!-- component require special treatment -->
   </SimpleAppFieldContainer>
 </template>
 
@@ -264,12 +300,13 @@ import Rating, { RatingProps } from "primevue/rating";
 import Slider, { SliderProps } from "primevue/slider";
 import Textarea, { TextareaProps } from "primevue/textarea";
 import { SimpleAppInputType } from "~/types";
-
+const resetcount = ref(0)
 const instancepath = ref("");
 const modelValue = defineModel({ required: true });
-const datevalue = ref("");
-const timevalue = ref<Date>();
 
+const datevalue = ref<Date>();
+const timevalue = ref<Date>();
+let watchOnChange = 0;
 const props = withDefaults(
   defineProps<{
     inputType: SimpleAppInputType;
@@ -284,6 +321,7 @@ const props = withDefaults(
     autofocus?: boolean;
     pt?: any;
     placeholder?: string;
+    autocompleteFilter?: any;
     componentProps?:
       | InputNumberProps
       | InputSwitchProps
@@ -296,45 +334,55 @@ const props = withDefaults(
   { type: "text" },
 );
 
-const pt =ref(props.pt)
+const pt = ref(props.pt);
 
 if (props.inputType == SimpleAppInputType.date && modelValue.value) {
-  datevalue.value = moment(modelValue.value as string).format("YYYY-MM-DD");
+  datevalue.value = stringToDate(<string>modelValue.value); //.format("YYYY-MM-DD");
 } else {
-  datevalue.value = "";
+  datevalue.value = undefined;
+}
+
+if (props.inputType == SimpleAppInputType.time) {
+  if (modelValue.value) {
+    timevalue.value = stringToDate(
+      (today() + "T" + modelValue.value) as string,
+    ); //.format("YYYY-MM-DD");
+  } else {
+    timevalue.value = undefined;
+  }
 }
 
 if (props?.instancepath) instancepath.value = props.instancepath;
-  else if (props.setting?.instancepath)
-    instancepath.value = props.setting.instancepath;
-  else instancepath.value = "/unknown";
+else if (props.setting?.instancepath)
+  instancepath.value = props.setting.instancepath;
+else instancepath.value = "/unknown";
 
 watch(props.setting.errors, (newvalue, oldvalue) => {
-  let errmsg = ''
+  let errmsg = "";
   if (newvalue[instancepath.value]) {
-    const errlist: any[] = newvalue[instancepath.value];    
+    const errlist: any[] = newvalue[instancepath.value];
     for (let i = 0; i < errlist.length; i++) {
       errmsg += errlist[i].message + ",";
-    }    
+    }
   } else {
-    errmsg = "";    
+    errmsg = "";
   }
-  if(errmsg!=''){
-    const errorstyle = { style:'border-color: lightcoral; color:white '}
-    if(!pt.value)pt.value = {}
+  if (errmsg != "") {
+    const errorstyle = { style: "border-color: lightcoral; color:lightcoral " };
+    if (!pt.value) pt.value = {};
 
-    if(props.inputType == SimpleAppInputType.text) pt.value={ root: errorstyle}
-    else if(props.inputType == SimpleAppInputType.autocomplete) pt.value={ input:errorstyle} 
-    else  if(props.inputType == SimpleAppInputType.number) pt.value={ input: {root:errorstyle}  } 
-    else pt.value = {root: errorstyle, input:{root:errorstyle}}
+    if (props.inputType == SimpleAppInputType.text)
+      pt.value = { root: errorstyle };
+    else if (props.inputType == SimpleAppInputType.autocomplete)
+      pt.value = { input: errorstyle };
+    else if (props.inputType == SimpleAppInputType.number)
+      pt.value = { input: { root: errorstyle } };
+    else pt.value = { root: errorstyle, input: { root: errorstyle } };
     //some component still not working
-
-  }else{
-   pt.value=props.pt 
+  } else {
+    pt.value = props.pt;
   }
-    
-  
-})
+});
 const isReadonly = computed(() => {
   if (props.readonly) {
     return props.readonly;
@@ -344,15 +392,18 @@ const isReadonly = computed(() => {
     return false;
   }
 });
-const updateTime = () => {
-  modelValue.value = moment(timevalue.value).format("HH:mm:ss");
+const updateTime = (value: Date) => {
+  value.setSeconds(0);
+  modelValue.value = dateToTimeString(value);
+  onChange();
 };
 const updateDate = (value: any) => {
   if (value) {
-    modelValue.value = moment(value).format("YYYY-MM-DD");
+    modelValue.value = dateToString(value);
   } else {
     modelValue.value = "";
   }
+  onChange();
 };
 
 const setFocus = (ev: any) => {
@@ -380,6 +431,10 @@ const emits = defineEmits([
   "update:docNoFormat",
 ]);
 
+const getDateFormat = () => {
+  return getPrimevueCalendarDateFormat();
+};
+
 watch(modelValue, (newvalue: any) => {
   if (
     [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
@@ -387,14 +442,19 @@ watch(modelValue, (newvalue: any) => {
     )
   ) {
     if (modelValue.value) {
-      datevalue.value = moment(modelValue.value as string).format("YYYY-MM-DD");
+      datevalue.value = stringToDate(modelValue.value as string);
+    } else {
+      timevalue.value = undefined;
+    }
+  } else if (props.inputType == SimpleAppInputType.time) {
+    if (modelValue.value) {
+      timevalue.value = stringToDate(
+        (today() + "T" + modelValue.value) as string,
+      );
     } else {
-      datevalue.value = "";
+      timevalue.value = undefined;
     }
   }
-
-  emits("change", modelValue.value);
-  emits("update:modelValue", modelValue.value);
 });
 onMounted(() => {
   if (
@@ -403,13 +463,27 @@ onMounted(() => {
     )
   ) {
     if (modelValue.value) {
-      datevalue.value = moment(modelValue.value as string).format("YYYY-MM-DD");
+      datevalue.value = stringToDate(modelValue.value as string);
+    } else {
+      datevalue.value = undefined;
+    }
+  } else if (props.inputType == SimpleAppInputType.time) {
+    if (modelValue.value) {
+      timevalue.value = stringToDate(
+        (today() + "T" + modelValue.value) as string,
+      );
     } else {
-      datevalue.value = "";
+      timevalue.value = undefined;
     }
   }
 });
 
+const onChange = () => {
+  pt.value=undefined
+  resetcount.value++
+  emits("change", modelValue.value);
+};
+
 /************ start autocomplete only ***************/
 
 /************ end autocomplete only ***************/

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="text-base text-primary-600 dark:text-primary-500">
+    <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-02-22
+ * author: Ks Tan
+ */
+</script>