@simitgroup/simpleapp-generator 1.6.3-alpha → 1.6.4-b-alpha

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

@@ -34,71 +34,51 @@
       v-bind="componentProps as InputSwitchProps"
       @change="onChange"
     />
-    <!--
-    <InputText
-      type="date"
-      :pt="pt"
-      v-else-if="inputType == SimpleAppInputType.date"
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="datevalue"
-      @update:modelValue="updateDate"
-      :readonly="isReadonly"
-      :placeholder="placeholder"
-      v-bind="componentProps as InputTextProps"
-    /> -->
+    
     <!-- calendar component -->
-    <Calendar
-      type="date"
-      :pt="pt"
+    <SimpleAppCalendarInput 
       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"
+      :pt="pt"
+      type="date"
+      v-model="modelValue"      
+      :uuid="slotprops.uuid"
       :placeholder="placeholder"
-      :date-format="getDateFormat()"
-      v-bind="componentProps as CalendarProps"
-    />
-
+      :setting="setting"
+      :readonly="isReadonly"
+      :componentProps="componentProps"
+      @change="onChange"
+      />
+    
     <!-- time component -->
-    <Calendar
-      :pt="pt"
+    <SimpleAppCalendarInput 
       v-else-if="inputType == SimpleAppInputType.time"
-      timeOnly
-      showTime
-      hourFormat="12"
-      @update:modelValue="updateTime"
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="timevalue"
-      :readonly="isReadonly"
-      :placeholder="placeholder"
-      v-bind="componentProps as CalendarProps"
-    />
-
-    <Calendar
       :pt="pt"
-      v-else-if="inputType == SimpleAppInputType.datetime"
-      :inputId="slotprops.uuid"
-      :path="setting.instancepath"
-      v-model="datetimevalue"
-      @update:modelValue="updateDateTime"
-      :touchUI="isMobile()"
-      showButtonBar
+      type="time"
+      v-model="modelValue"      
+      :uuid="slotprops.uuid"
+      :placeholder="placeholder"
+      :setting="setting"
       :readonly="isReadonly"
+      :componentProps="componentProps"
+      @change="onChange"
+      />
+    
+    <SimpleAppCalendarInput 
+      v-else-if="inputType == SimpleAppInputType.datetime"
+      :pt="pt"
+      type="datetime"
+      v-model="modelValue"      
+      :uuid="slotprops.uuid"
       :placeholder="placeholder"
-      :date-format="getDateFormat()"
-      showTime
-      hourFormat="12"
-      v-bind="componentProps as CalendarProps"
-    />
+      :setting="setting"
+      :readonly="isReadonly"
+      :componentProps="componentProps"
+      @change="onChange"
+      />
+    
     <!-- select/list component -->
     <Listbox
       v-model="modelValue"
@@ -134,7 +114,6 @@
       @change="onChange"
     />
 
-
     <MultiSelect
       v-model="modelValue"
       :pt="pt"
@@ -168,6 +147,31 @@
       </div>
     </div>
 
+    <SimpleAppUserPicker
+      v-else-if="inputType == SimpleAppInputType.user"
+      v-model="modelValue as autocompletetype"
+      :hidelabel="hidelabel"
+      :pt="pt"
+      :setting="setting"
+      :disabled="isReadonly"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+      :autocompleteFilter="autocompleteFilter"
+      @change="onChange"
+    >
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <template #content>
+        <slot name="content"></slot>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option"></slot>
+      </template>
+    </SimpleAppUserPicker>
+
     <!-- autocomplete, need do more enterprise grade component-->
     <SimpleAppAutocomplete
       v-else-if="inputType == SimpleAppInputType.autocomplete"
@@ -182,7 +186,17 @@
       :placeholder="placeholder"
       :autocompleteFilter="autocompleteFilter"
       @change="onChange"
-    />
+    >
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <template #content>
+        <slot name="content"></slot>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option"></slot>
+      </template>
+    </SimpleAppAutocomplete>
     <!-- v-bind:attributes="componentProps" -->
     <!--  document no input-->
     <SimpleAppDocumentNo
@@ -265,6 +279,8 @@
       @focus="setFocus"
       :max-fraction-digits="2"
       :min-fraction-digits="2"
+      mode="currency" 
+      :currency="getCurrency()"
       :readonly="isReadonly"
       :pt="pt"
       :class="!pt ? 'w-full flex flex-col' : ''"
@@ -340,10 +356,8 @@ const resetcount = ref(0);
 const instancepath = ref("");
 const modelValue = defineModel({ required: true });
 
-const datevalue = ref<Date>();
-const datetimevalue = ref<Date>();
-const timevalue = ref<Date>();
-let watchOnChange = 0;
+
+const watchOnChange = ref(false);
 const props = withDefaults(
   defineProps<{
     inputType: SimpleAppInputType;
@@ -353,6 +367,7 @@ const props = withDefaults(
     setting: any;
     type?: string;
     instancepath?: string;
+    options?: string[];
     hidelabel?: boolean;
     readonly?: boolean;
     autofocus?: boolean;
@@ -373,26 +388,6 @@ const props = withDefaults(
 
 const pt = ref(props.pt);
 
-if (props.inputType == SimpleAppInputType.date && modelValue.value) {
-  datevalue.value = stringToDate(<string>modelValue.value); //.format("YYYY-MM-DD");
-} else {
-  datevalue.value = undefined;
-}
-if (props.inputType == SimpleAppInputType.datetime && modelValue.value) {
-  datetimevalue.value = stringToDate(<string>modelValue.value);
-} else {
-  datetimevalue.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)
@@ -424,6 +419,8 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
   } else {
     pt.value = props.pt;
   }
+
+  watchOnChange.value = true;
 });
 const isReadonly = computed(() => {
   if (props.readonly) {
@@ -434,39 +431,19 @@ const isReadonly = computed(() => {
     return false;
   }
 });
-const updateTime = (value: Date) => {
-  value.setSeconds(0);
-  modelValue.value = dateToTimeString(value);
-  onChange();
-};
-const updateDate = (value: any) => {
-  if (value) {
-    modelValue.value = dateToString(value);
-  } else {
-    modelValue.value = "";
-  }
-  onChange();
-};
-const updateDateTime = (value: any) => {
-  if (value) {
-    modelValue.value = dateToISOString(value);
-  } else {
-    modelValue.value = "";
-  }
-  onChange();
-};
+
 
 const setFocus = (ev: any) => {
   if (!isMobile()) ev.target.select();
 };
 
 const getListOptions = () => {
-  const options = [];  
-  const enumlist = props.setting.fieldsetting.type == 'array' 
-      ? props.setting.fieldsetting.items.enum 
-      : props.setting.fieldsetting.enum 
-
-  
+  const options = [];
+  const enumlist =
+    props.options ??
+    (props.setting.fieldsetting.type == "array"
+      ? props.setting.fieldsetting.items.enum
+      : props.setting.fieldsetting.enum);
 
   if (enumlist) {
     for (let i = 0; i < enumlist.length; i++) {
@@ -487,69 +464,13 @@ const emits = defineEmits([
   "update:docNoFormat",
 ]);
 
-const getDateFormat = () => {
-  return getPrimevueCalendarDateFormat();
-};
-
-watch(modelValue, (newvalue: any) => {
-  if (
-    [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
-      props.inputType,
-    )
-  ) {
-    if (modelValue.value) {
-      datevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      timevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.datetime) {
-    if (modelValue.value) {
-      datetimevalue.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 {
-      timevalue.value = undefined;
-    }
-  }
-});
-onMounted(() => {
-  if (
-    [SimpleAppInputType.date, SimpleAppInputType.calendar].includes(
-      props.inputType,
-    )
-  ) {
-    if (modelValue.value) {
-      datevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      datevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.datetime) {
-    if (modelValue.value) {
-      datetimevalue.value = stringToDate(modelValue.value as string);
-    } else {
-      datetimevalue.value = undefined;
-    }
-  } else if (props.inputType == SimpleAppInputType.time) {
-    if (modelValue.value) {
-      timevalue.value = stringToDate(
-        (today() + "T" + modelValue.value) as string,
-      );
-    } else {
-      timevalue.value = undefined;
-    }
-  }
-});
 
 const onChange = () => {
-  pt.value = undefined;
-  resetcount.value++;
-  emits("change", modelValue.value);
+  if (props.setting.document.isReady()) {
+    pt.value = undefined;
+    resetcount.value++;
+    emits("change", modelValue.value);
+  }
 };
 
 /************ start autocomplete only ***************/

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

@@ -1,29 +1,36 @@
 <template>
-    <DataTable v-bind="$attrs" stripedRows resizableColumns
-     class="simpleapp-datatable p-datatable-sm" :value="modelValue">
-    <template #empty> <div class="text-center">No record found.</div> </template>
-    <template #header v-if="!setting.readonly  && !readonly">
-        <div  >        
-            <Button  icon="pi pi-plus" @click="addNew()" class="simpleapp-datatable-add btn-primary" type="button">Add</Button>
-        </div>
+  <DataTable
+    v-bind="$attrs"
+    stripedRows
+    resizableColumns
+    :rowClass="()=>'align-top'"
+    class="simpleapp-datatable p-datatable-sm"
+    :value="modelValue"
+  >
+    <template #empty>
+      <div class="text-center">No record found.</div>
+    </template>
+    <template #header v-if="!setting.readonly && !readonly">
+      <div class="flex flex-row gap-2">
+        <slot name="header">
+          <Button
+            icon="pi pi-plus"
+            @click="addNew()"
+            class="simpleapp-datatable-add btn-primary"
+            type="button"
+            >{{ t("add") }}</Button
+          >
+        </slot>
+      </div>
     </template>
     <slot>
-        
-            
-            <Column class="text-center" header="undefine columns">
-                <template #body>
-                    <div class="text-center">Missing {{ '<Column></Column>' }}</div>
-                </template>
-                
-            </Column> 
-      
-        
-            
-            
+      <Column class="text-center" header="undefine columns">
+        <template #body>
+          <div class="text-center">Missing {{ '<Column></Column>' }}</div>
+        </template>
+      </Column>
     </slot>
-            
-
-    </DataTable>
+  </DataTable>
 </template>
 <script setup lang="ts">
 /**
@@ -32,31 +39,28 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import {ref} from 'vue'
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
+import { ref } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
 
 const props = defineProps<{
-    // columns:InputTableColumn[],
-    setting:any,
-    getField:Function,    
-    readonly?:boolean
-}>()
-
+  // columns:InputTableColumn[],
+  setting: any;
+  getField: Function;
+  readonly?: boolean;
+}>();
 
 //{path: '#/properties/details', instancepath: '/details', fieldsetting: {…}, modelObject: Proxy(Object), apiObj: INVApi, …}
-const modelValue = defineModel<any[]>()
-    
-    
+const modelValue = defineModel<any[]>();
+
 const addNew = () => {
-    const field = props.setting.path.split('/').at(-1)    
-    props.setting.document[`add${field}`]()
-}
-/** 
+  const field = props.setting.path.split("/").at(-1);
+  props.setting.document[`add${field}`]();
+};
+/**
  * 1. support array with field to label
  * 2. auto add edit button
  * 3. option readonly or not readonly
- * 4. 
+ * 4.
  */
-
 </script>