@simitgroup/simpleapp-generator 2.0.1-u-alpha → 2.0.1-w-alpha

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

@@ -0,0 +1,76 @@
+<template>
+  <span>
+    <slot> {{ (selectedOption as any)?.label ?? modelValue }}</slot>
+  </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-04-14
+ * author: Ks Tan
+ */
+const modelValue = defineModel<string>();
+
+const emits = defineEmits(["after"]);
+const props = defineProps<{ value?: string; setting: any; data: any }>();
+
+const options = ref([]);
+
+const abortController = ref<AbortController | null>(null);
+
+watchEffect(async (onCleanup) => {
+  if (!modelValue.value || modelValue.value === "") {
+    return;
+  }
+
+  const remoteConfig = props.setting?.["x-remote"] ?? {};
+  if (!remoteConfig.url) {
+    options.value = [];
+    return;
+  }
+
+  // Abort any previous fetch
+  if (abortController.value) {
+    abortController.value.abort();
+  }
+
+  const controller = new AbortController();
+  abortController.value = controller;
+
+  const { url, labelField, valueField } = remoteConfig;
+
+  const finalUrl = interpolateUrl(url, props.data);
+
+  try {
+    const resp = await fetch(finalUrl, { signal: controller.signal });
+    const data = await resp.json();
+
+    options.value = data.map((item: any) => ({
+      ...item,
+      label: item[labelField],
+      value: item[valueField],
+    }));
+  } catch (err: any) {
+    if (err.name === "AbortError") {
+      console.log("Fetch aborted");
+    } else {
+      console.error("Failed to load options:", err);
+    }
+  }
+
+  // Cleanup when dependency changes or component unmounts
+  onCleanup(() => controller.abort());
+});
+
+// also ensure cleanup on unmount
+onBeforeUnmount(() => {
+  if (abortController.value) {
+    abortController.value.abort();
+  }
+});
+
+const selectedOption = computed(() => {
+  return options.value.find((option: any) => modelValue.value === option.value);
+});
+</script>

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

@@ -114,6 +114,20 @@
       @change="onChange"
     />
 
+    <SimpleAppRemoteSelect
+      v-else-if="SimpleAppInputType.remoteselect == inputType"
+      v-model="modelValue"
+      :pt="pt"
+      :input-id="slotprops.uuid"
+      :path="setting.instancepath"
+      :readonly="isReadonly"
+      class="w w-full lg:w-full"
+      :placeholder="placeholder"
+      :setting="setting"
+      v-bind="componentProps"
+      @change="onChange"
+    />
+
     <MultiSelect
       v-else-if="SimpleAppInputType.selectmultiple == inputType"
       v-model="modelValue"
@@ -390,6 +404,7 @@ import type { TextareaProps } from "primevue/textarea";
 import Textarea from "primevue/textarea";
 import Editor from "primevue/editor";
 import { SimpleAppInputType } from "~/types";
+import SimpleAppRemoteSelect from "./SimpleAppRemoteSelect.vue";
 const resetcount = ref(0);
 const instancepath = ref("");
 const modelValue = defineModel<any>({ required: true });
@@ -459,6 +474,10 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
   watchOnChange.value = true;
 });
 const isReadonly = computed(() => {
+  if (props.setting?.fieldsetting?.["x-readonly"]) {
+    return props.setting?.fieldsetting?.["x-readonly"];
+  }
+
   if (props.readonly) {
     return props.readonly;
   } else if (props.setting.readonly) {

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

@@ -0,0 +1,110 @@
+<template>
+  <Select
+    v-model="modelValue"
+    :pt="pt"
+    :input-id="inputId"
+    :path="setting.instancepath"
+    :readonly="readonly"
+    class="w w-full lg:w-full"
+    :disabled="readonly ? true : false"
+    :options="options ?? []"
+    option-label="label"
+    option-value="value"
+    :placeholder="placeholder"
+    @change="handleChange"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  setting: any;
+  readonly?: boolean;
+  placeholder?: string;
+  hidelabel?: boolean;
+  inputId: string;
+  pt?: any;
+}>();
+
+const modelValue = defineModel();
+
+const options = ref([]);
+
+const abortController = ref<AbortController | null>(null);
+
+function handleChange(newValue: any) {
+  const remoteConfig = props.setting.fieldsetting?.["x-remote"];
+  const actions = remoteConfig?.onChangeAction ?? [];
+  if (!Array.isArray(actions) || actions.length === 0) return;
+
+  const modelObject = props.setting.modelObject ?? {};
+  const selectedOption = options.value.find(
+    (opt: any) => opt.value === newValue,
+  );
+
+  for (const action of actions) {
+    if (!action.updateField) continue;
+
+    let updateVal: any = action.updateValue;
+
+    if (
+      typeof updateVal === "string" &&
+      updateVal.startsWith("{") &&
+      updateVal.endsWith("}")
+    ) {
+      // ✅ Replace {path.to.value} using selectedOption
+      const path = updateVal.slice(1, -1).trim();
+      const resolvedVal = resolvePath(selectedOption ?? {}, path);
+      updateVal = resolvedVal !== undefined ? resolvedVal : "";
+    }
+
+    setPath(modelObject, action.updateField, updateVal);
+  }
+}
+
+watchEffect(async (onCleanup) => {
+  const remoteConfig = props.setting.fieldsetting?.["x-remote"] ?? {};
+  if (!remoteConfig.url) {
+    options.value = [];
+    return;
+  }
+
+  // Abort any previous fetch
+  if (abortController.value) {
+    abortController.value.abort();
+  }
+
+  const controller = new AbortController();
+  abortController.value = controller;
+
+  const { url, labelField, valueField } = remoteConfig;
+  const modelObject = props.setting.modelObject ?? {};
+  const finalUrl = interpolateUrl(url, modelObject);
+
+  try {
+    const resp = await fetch(finalUrl, { signal: controller.signal });
+    const data = await resp.json();
+
+    options.value = data.map((item: any) => ({
+      ...item,
+      label: item[labelField],
+      value: item[valueField],
+    }));
+  } catch (err: any) {
+    if (err.name === "AbortError") {
+      console.log("Fetch aborted");
+    } else {
+      console.error("Failed to load options:", err);
+    }
+  }
+
+  // Cleanup when dependency changes or component unmounts
+  onCleanup(() => controller.abort());
+});
+
+// also ensure cleanup on unmount
+onBeforeUnmount(() => {
+  if (abortController.value) {
+    abortController.value.abort();
+  }
+});
+</script>

package/templates/nuxt/types/simpleappinput.ts.eta

@@ -4,66 +4,65 @@
  * last change 2024-02-23
  * Author: Ks Tan
  */
-export enum SimpleAppInputType  {
-    'text'='text',
-    'textarea'='textarea',
-    'html'='html',
-    
-    'date'='date',
-    'time'='time',
-    'calendar'='calendar',
-    'datetime'='datetime',
+export enum SimpleAppInputType {
+  "text" = "text",
+  "textarea" = "textarea",
+  "html" = "html",
 
-    'autocomplete'='autocomplete',
-    'autocompletemultiple'='autocompletemultiple',
+  "date" = "date",
+  "time" = "time",
+  "calendar" = "calendar",
+  "datetime" = "datetime",
 
-    'selectmultiple'='selectmultiple',
-    'listmultiple'='listmultiple',
+  "autocomplete" = "autocomplete",
+  "autocompletemultiple" = "autocompletemultiple",
 
-    'radio'='radio',
-    'select'='select',
-    'list'='list',
+  "selectmultiple" = "selectmultiple",
+  "listmultiple" = "listmultiple",
+  "remoteselect" = "remoteselect",
 
-    'chip'='chip', 
+  "radio" = "radio",
+  "select" = "select",
+  "list" = "list",
 
-    'checkbox'='checkbox',
-    'switch'='switch',
-    
-    
-    'documentno'='documentno',
-    'password'='password',
+  "chip" = "chip",
 
-    'number'='number',
-    'money'='money',
-    'rating'='rating',
-    'slider'='slider',
-    'user'='user',
-}
+  "checkbox" = "checkbox",
+  "switch" = "switch",
 
+  "documentno" = "documentno",
+  "password" = "password",
 
-export type autocompletetype={
-    _id:string
-    label:string
-    code:string
-    [key:string]:any
+  "number" = "number",
+  "money" = "money",
+  "rating" = "rating",
+  "slider" = "slider",
+  "user" = "user",
 }
-export enum FormCrudEvent  {
-    'mount'='mount',
-    'exit'='exit',
-    'create'='create',
-    'update'='update',
-    'delete'='delete',
-    'setDocStatus'='setDocStatus',        
+
+export type autocompletetype = {
+  _id: string;
+  label: string;
+  code: string;
+  [key: string]: any;
+};
+export enum FormCrudEvent {
+  "mount" = "mount",
+  "exit" = "exit",
+  "create" = "create",
+  "update" = "update",
+  "delete" = "delete",
+  "setDocStatus" = "setDocStatus",
 }
 export type FormActions = {
-    [key:string]:string[]    
-}
+  [key: string]: string[];
+};
 
 export type FormMenu = {
-    type?:string
-    action?:string    
-    label?: string | ((...args: any) => string) | undefined
-    command? : Function
-    event?:FormCrudEvent
-    [key:string] : any
-}
+  type?: string;
+  action?: string;
+  label?: string | ((...args: any) => string) | undefined;
+  command?: Function;
+  event?: FormCrudEvent;
+  [key: string]: any;
+};