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

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

@@ -0,0 +1,387 @@
+<template>
+  <div
+    v-if="readonly"
+    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
+  >
+    <div>
+      {{ modelValue && modelValue.fullName ? modelValue.fullName : "-" }}
+    </div>
+  </div>
+  <div
+    v-else-if="modelValue !== undefined"
+    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 relative"
+  >
+    <div ref="autocompleteinput" readonly>
+      {{ modelValue && modelValue.fullName ? modelValue.fullName : "-" }}
+    </div>
+
+    <div
+      class="absolute h-full top-0 right-0 text-right text-white z-10 align-middle p-3"
+    >
+      <a
+        class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
+        @click="clear"
+        tabindex="0"
+      ></a>
+    </div>
+  </div>
+  <div v-else class="relative">
+    <div
+      class="absolute h-full top-0 right-10 text-right text-white z-10 align-middle p-3"
+      v-if="modelValue?._id"
+    >
+      <span
+        class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
+        @click="clear"
+      ></span>
+    </div>
+
+    <AutoComplete
+      v-if="!isMobile()"
+      class="w-full"
+      v-model="modelValue"
+      ref="autocompleteinput"
+      forceSelection
+      optionLabel="label"
+      @focus="setFocus"
+      @item-select="pickAutoComplete"
+      @complete="getListFromAutocompleteApi"
+      :placeholder="placeholdertxt"
+      :dropdown="true"
+      @clear="clear"
+      :dropdown-mode="'current'"
+      :readonly="readonly"
+      :pt="pt"
+      :delay="500"
+      :disabled="readonly"
+      @click="clickAutocomplete"
+      :suggestions="list"
+      @blur="onBlurAutocomplete"
+      :inputId="inputId"
+      :path="setting.instancepath"
+    >
+      <template #header>
+        <slot name="header">
+          <div class="flex flex-row font font-bold dark:text-white">
+            <div>{{ t("user") }}</div>
+          </div>
+        </slot>
+      </template>
+      <template #content>
+        <div class="bg-red-300">content</div>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option">
+          <div class="flex flex-row dark:text-white">
+            <div>{{ option.label }}</div>
+          </div>
+        </slot>
+      </template>
+      <!-- </slot> -->
+    </AutoComplete>
+    <div v-else>
+      <InputGroup class="w-full flex flex-row">
+        <InputText
+          :value="modelValue?.label"
+          @focus="showAutocompleteDialog(false)"
+          :placeholder="placeholdertxt"
+          class="rounded-r-none"
+        ></InputText>
+        <InputGroupAddon
+          @click="showAutocompleteDialog(true)"
+          v-ripple
+          class="bg bg-primary-600 dark:bg-primary-700 text-white rounded-r-lg p-3"
+        >
+          <i :class="`pi ${modelValue ? 'pi-link' : 'pi-angle-down'}`"></i>
+        </InputGroupAddon>
+      </InputGroup>
+
+      <OverlaySideBarCrud
+        v-model="mobileVisible"
+        closeEventName="autocompleteoverlay"
+      >
+        <template v-if="mobileListMode == 'list'">
+          <mobile-toolbar>
+            <template #start>
+              <ButtonText @click="mobileVisible = false">
+                <i class="pi pi-times"></i>
+              </ButtonText>
+            </template>
+            <template #center>
+              <TextTitle class="text-white">{{ t(docname) }}</TextTitle>
+            </template>
+            <template #end>
+              <div></div>
+              <!-- <ButtonText @click="openViewer(false)">
+              <i class="pi pi-plus"></i>
+              </ButtonText>  -->
+            </template>
+          </mobile-toolbar>
+          <ListView
+            :list="list"
+            :withFilter="true"
+            :defaultFilterValue="defaultFilterValue"
+            idField="_id"
+            titleField="code"
+            subTitleField="label"
+            #default="{ item, index }"
+            @click="onClickInMobile"
+          >
+            <div class="flex flex-row justify-end">
+              <div class="flex-1">{{ item.label }}</div>
+            </div>
+          </ListView>
+        </template>
+        <template v-else>
+          <component
+            :is="
+              defineAsyncComponent(
+                getDocument(setting.fieldsetting['x-foreignkey']).viewer,
+              )
+            "
+            @after="
+              async (eventType: FormCrudEvent, data: any, result: any) =>
+                await afterRenderMobileForm(eventType, data)
+            "
+          />
+        </template>
+      </OverlaySideBarCrud>
+    </div>
+  </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
+ */
+import { isNull } from "lodash";
+import jsonpath from "jsonpath";
+import {
+  AutoCompleteDropdownClickEvent,
+  AutoCompleteProps,
+} from "primevue/autocomplete";
+import {
+  autocompletetype,
+  ForeignKey,
+  FormCrudEvent,
+  SchemaConfig,
+  SchemaType,
+} from "~/types";
+const mobileVisible = ref(false);
+const autocompleteinput = ref<autocompletetype | undefined>();
+const { $event } = useNuxtApp();
+const list = ref<any[]>([]);
+const props = withDefaults(
+  defineProps<{
+    setting: any;
+    allowAddNew?: boolean;
+    showNull?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    hidelabel?: boolean;
+    inputId: string;
+    componentProps?: AutoCompleteProps;
+    autocompleteFilter?: any;
+    pt?: any;
+  }>(),
+  {
+    allowAddNew: true,
+    showNull: true,
+  },
+);
+const mobileListMode = ref("list");
+const defaultFilterValue = ref("");
+const path = "$" + props.setting.instancepath;
+const modifiedpath = path.replaceAll("/", ".");
+const queryresult = jsonpath.query(props.setting.defaultValue, modifiedpath)[0];
+const remotedoc = getDocument(props.setting.fieldsetting["x-foreignkey"]);
+const schema: SchemaType = <SchemaType>remotedoc?.docClass.getSchema();
+const labelfield = "fullName";
+
+const docname = props.setting.fieldsetting["x-foreignkey"];
+const placeholdertxt = computed(() => props.placeholder ?? t(docname));
+const emptyautocomplete = computed(() => undefined); //((): autocompletetype => queryresult);
+const cancelShowList = ref(false);
+const autocompleteitem = ref<autocompletetype | undefined>(
+  emptyautocomplete.value,
+);
+const modelValue = defineModel<autocompletetype | undefined>({
+  required: true,
+});
+if (modelValue.value && modelValue.value._id) {
+  autocompleteitem.value = { ...modelValue.value };
+}
+//clear auto complete auto set value = empty
+const clear = () => {
+  autocompleteitem.value = undefined;
+  modelValue.value = undefined;
+};
+
+//if record picked, click button show record info instead
+const openlink = () => {
+  if (modelValue.value?._id) {
+    openViewer(true);
+  }
+};
+
+//recorrect data if lose focus
+const onBlurAutocomplete = () => {
+  if (autocompleteitem.value === null) {
+    autocompleteitem.value = emptyautocomplete.value;
+  }
+  if (isNull(modelValue.value)) {
+    modelValue.value = autocompleteitem.value;
+  } else if (typeof modelValue.value == "object") {
+  } else {
+    modelValue.value = autocompleteitem.value;
+  }
+};
+
+const showAutocompleteDialog = (isbutton: boolean) => {
+  mobileListMode.value = "list";
+  if (modelValue.value && isbutton) {
+    openViewer(false);
+  } else {
+    //  if(!modelValue.value && !isbutton ){
+    mobileVisible.value = true;
+    defaultFilterValue.value =
+      modelValue.value && modelValue.value?._id ? modelValue.value.label : "";
+    getListFromAutocompleteApi({ query: "" });
+  }
+};
+//obtain remote data
+const getListFromAutocompleteApi = (event: any) => {
+  const keyword = event?.query ?? "";
+  const defaultfilter: any = { active: true, uid: { $ne: "" } };
+
+  const morefilter = props.autocompleteFilter ?? defaultfilter;
+
+  getDocumentApi("user")
+    .autoComplete(keyword, morefilter)
+    .then((res: any) => {
+      console.log("Run autocomplete?");
+      list.value = res.data;
+
+      if (props.allowAddNew) {
+        list.value = list.value.concat({
+          _id: "new",
+          uid: "",
+          label: "<" + t("new") + ">",
+        });
+      }
+    });
+};
+
+//on select
+const pickAutoComplete = (event: any) => {
+  if (event.value._id === "") {
+    modelValue.value = undefined; //emptyautocomplete.value;
+    autocompleteitem.value = undefined; //emptyautocomplete.value;
+  } else if (event.value._id === "new") {
+    modelValue.value = undefined; // emptyautocomplete.value;
+    autocompleteitem.value = undefined; //emptyautocomplete.value;
+    if (isMobile()) {
+      mobileListMode.value = "form";
+      return;
+    } else openViewer(false);
+  } else if (typeof event.value.query == "undefined") {
+    const selecteddata = {
+      _id: event.value._id,
+      uid: event.value.uid,
+      fullName: event.value.label,
+    };
+
+    modelValue.value = selecteddata;
+    autocompleteitem.value = selecteddata;
+  }
+  mobileVisible.value = false;
+};
+
+const emits = defineEmits([
+  "change",
+  "update:modelValue",
+  "update:docNoFormat",
+]);
+watch(modelValue, (newvalue: any) => {
+  emitChanges();
+});
+const emitChanges = () => {
+  emits("change", modelValue.value);
+};
+
+const setFocus = (ev: any) => {
+  if (!isMobile()) ev.target.select();
+};
+
+//pop up records
+const openViewer = (readonly: boolean) => {
+  if (remotedoc) {
+    $event("ViewRecord", {
+      _id: modelValue.value?._id as string,
+      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
+      after: async (eventType: FormCrudEvent, data: any) => {
+        if (
+          eventType == FormCrudEvent.create ||
+          eventType == FormCrudEvent.update
+        ) {
+          autocompleteitem.value = {
+            _id: data._id,
+            uid: data.uid,
+            fullName: data.fullName,
+          };
+          if (schema["x-simpleapp-config"].additionalAutoCompleteFields) {
+            const addfields =
+              schema["x-simpleapp-config"].additionalAutoCompleteFields;
+            for (let i = 0; i < addfields.length; i++) {
+              const fieldname = addfields[i] as string;
+              autocompleteitem.value[fieldname] = data[fieldname];
+            }
+          }
+          modelValue.value = { ...autocompleteitem.value };
+          emitChanges();
+        }
+      },
+    });
+  }
+};
+
+const onClickInMobile = (id: string, item: ForeignKey) => {
+  pickAutoComplete({ value: item });
+};
+
+const afterRenderMobileForm = async (
+  eventType: FormCrudEvent,
+  data: any,
+  result: any,
+) => {
+  console.log("afterRenderMobileForm", eventType);
+  if (eventType == FormCrudEvent.create || eventType == FormCrudEvent.update) {
+    autocompleteitem.value = {
+      _id: data._id,
+      uid: data.uid,
+      fullName: data.fullName,
+    };
+
+    modelValue.value = { ...autocompleteitem.value };
+    emitChanges();
+    mobileVisible.value = false;
+  } else if (eventType == FormCrudEvent.exit) {
+    mobileVisible.value = false;
+  }
+};
+
+const clickAutocomplete = (a, b) => {
+  console.log("clickAutocomplete", a, b);
+  return false;
+};
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <Tag v-if="!docStatus" severity="secondary">{{ t("unknown") }}</Tag>
+  <Tag v-else-if="docStatus == 'confirm'" severity="success">{{
+    t(docStatus)
+  }}</Tag>
+  <Tag v-else-if="docStatus == 'void'" severity="danger">{{
+    t(docStatus)
+  }}</Tag>
+  <Tag v-else-if="docStatus == 'draft'" severity="secondary"
+    >{{ t(docStatus) }}
+  </Tag>
+  <Tag v-else severity="warning">??{{ t(docStatus) }}</Tag>
+</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
+ */
+const props = defineProps<{ docStatus?: string }>();
+</script>

package/templates/nuxt/components/user/UserButtonCreateTenant.vue._eta

@@ -10,14 +10,14 @@
             v-model:model-value="data.tenantName"
           />
           <div class="p-inputgroup-addon p p-0">
-            <button
+            <Button
               :label="t('create')"
-              class="border rounded-tl-none rounded-bl-none btn btn-primary -ml-1 h-full p-3 rounded-r-md"
+              class="border rounded-tl-none rounded-bl-none bg bg-primary-600 text-white -ml-1 h-full p-3 rounded-r-md"
               @click="createTenant"
               :loading="onhold"
             >
               {{ t("create") }}
-            </button>
+            </Button>
           </div>
         </div>
       </form>
@@ -33,24 +33,23 @@
  */
 import { ref } from "vue";
 import { AxiosResponse } from "axios";
-import {EventType,NotificationStatus} from "~/types"
+import { EventType, NotificationStatus } from "~/types";
 const visible = ref(false);
 const data = ref({
   tenantName: "",
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-  utcOffset: new Date().getTimezoneOffset()
+  utcOffset: new Date().getTimezoneOffset(),
 });
 
-
-
 const createtitle = ref("Create My Company");
 const errCreateTenant = ref();
 const onhold = ref(false);
 
 const createTenant = async () => {
+  holdScreenStart()
   onhold.value = true;
 
-  getPorfileApi()
+  getProfileApi()
     .createTenant(data.value)
     .then((res: AxiosResponse) => {
       if (res && res.status && res.status == 201) {
@@ -64,17 +63,16 @@ const createTenant = async () => {
       errCreateTenant.value = err["message"];
       console.error("errCreateTenant", err.response.data.data);
 
-      useNuxtApp().$event('Notification',{
-        documentName:'tenant',
+      useNuxtApp().$event("Notification", {
+        documentName: "tenant",
         status: NotificationStatus.error,
-        summary:t('createError'),
-        data:err.response?.data?.data
-
-      })
-
+        summary: t("createError"),
+        data: err.response?.data?.data,
+      });
     })
     .finally(() => {
       onhold.value = false;
+      holdScreenEnd()
     });
 };
 </script>