@simitgroup/simpleapp-generator 1.5.1-alpha → 1.6.1-alpha

package/templates/nuxt/components/image/ImageOrganization.vue.eta.vue

@@ -0,0 +1,40 @@
+<template>
+  <ImageToBase64Uploader
+    v-if="changable"
+    #default
+    class="w-20 h-20 place-content-center"
+    @image-uploaded="handleBase64"
+  >
+    <Image :src="imageData"></Image>
+  </ImageToBase64Uploader>
+  <div v-else class="inline-block border rounded-lg w-20 h-20">
+    <Image :src="imageData"></Image>
+  </div>
+</template>
+<script lang="ts" setup>
+// import {KeyValue} from ''
+const props = defineProps<{
+  changable: boolean;
+}>();
+const imageData = ref("");
+const handleBase64 = async (data: string) => {
+  const keyvalue = {
+    key: "organizationLogo",
+    value: data,
+  };
+  
+  const uploadok = await useNuxtApp()
+    .$OrganizationDoc()
+    .getApi()
+    .runUploadlogo(keyvalue);
+  if (uploadok) {
+    await loadLogo();
+  }
+};
+const loadLogo = async () => {
+  await refreshOrgLogo();
+  imageData.value = getOrgLogo();  
+};
+
+onMounted(async () => await loadLogo());
+</script>

package/templates/nuxt/components/image/ImageToBase64Uploader.vue.eta.vue

@@ -0,0 +1,147 @@
+<template>
+  <button
+    @click="openUploadDialog"
+    :title="selectedBase64Img"
+    class="place-content-center image-to-base64-uploader rounded-lg border block"
+  >
+    <slot name="default">
+      <Image v-if="selectedBase64Img" :src="selectedBase64Img" />
+      <i v-else class="pi pi-upload text-3xl"></i>
+    </slot>
+
+    <Dialog
+      v-model:visible="dialogVisible"
+      header="Image Upload"
+      :pt="{ root: { class: 'w-4/5' } }"
+    >
+      <div class="upload-container">
+        <input
+          type="file"
+          ref="fileInput"
+          accept="image/*"
+          @change="handleImageUpload"
+        />
+        <div id="preview" v-if="scaledImage" class="w-7/8">
+          <Cropper
+            ref="cropperInstance"
+            :src="scaledImage"
+            :stencil-props="{ aspectRatio: 1 }"
+            :options="cropperOptions"
+            @change="changeChropper"
+          />
+          <!-- :maxWidth="50" 
+					  :maxHeight="50" -->
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex flex-row gap-4">
+          <ButtonWarning @click="dialogVisible = false">{{
+            t("cancel")
+          }}</ButtonWarning>
+          <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
+        </div>
+      </template>
+    </Dialog>
+  </button>
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization. 
+ * IT IS NOT CHANGABLE
+ * last change 2024-04-06
+ * author: Ks Tan
+ */
+// Assuming the Dialog component and Cropper component are globally available or imported in a parent component
+import { defineEmits } from "vue";
+// import Cropper from 'cropperjs'; // Assuming CropperJS is installed using a package manager
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+const selectedBase64Img = ref("");
+const cropedBase64Img = ref("");
+const dialogVisible = ref(false);
+const previewImage = ref<string | null>(null);
+const scaledImage = ref<string | null>(null);
+const image = ref<string | null>(null);
+
+const emit = defineEmits<{
+  (event: "image-uploaded", imageData: string): void;
+}>();
+
+const openUploadDialog = () => {
+  dialogVisible.value = true;
+};
+
+const handleImageUpload = (event) => {
+  const file = event.target.files?.[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = () => {
+        const maxWidth = 800; // Set your desired maximum width
+        const maxHeight = 600; // Set your desired maximum height
+        const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
+        const scaledWidth = img.width * scale;
+        const scaledHeight = img.height * scale;
+
+        const canvas = document.createElement("canvas");
+        canvas.width = scaledWidth;
+        canvas.height = scaledHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+
+        scaledImage.value = canvas.toDataURL("image/jpeg"); // Replace with your preferred format
+      };
+      img.src = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+};
+
+// const handleImageUpload = (event) => {
+//   const file = event.target.files?.[0];
+//   if (file) {
+//     const reader = new FileReader();
+//     reader.onload = (e) => {
+//       previewImage.value = e.target.result as string;
+//       // Initialize Cropper instance automatically
+//       // if (cropperInstance.value) {
+//       //   cropperInstance.value.replace(previewImage.value); // Update Cropper with new image
+//       // }
+//     };
+//     reader.readAsDataURL(file);
+//   }
+// };
+const changeChropper = (imageEvent: any) => {
+  // console.log('changeChropper',imageEvent)
+  // if(cropedBase64Img.value==''){
+  //   cropedBase64Img.value = imageEvent.image.src
+  // }else{
+  //   cropedBase64Img.value=''
+  // }
+};
+const cropperInstance = ref();
+const cropperOptions = {
+  aspectRatio: 16 / 9, // Optional: Set aspect ratio for cropping
+  zoomable: true, // Optional: Allow zooming
+  movable: true, // Optional: Allow moving the crop area
+  viewMode: 1, // Optional: Set initial zoom level
+};
+
+const confirm = () => {
+  const imgevent = cropperInstance.value.getResult();
+  selectedBase64Img.value = imgevent.canvas.toDataURL("image/jpeg");
+  emit("image-uploaded", selectedBase64Img.value);
+
+  dialogVisible.value = false;
+  resetFileInput(); // Optional: Reset file input value
+};
+
+const resetFileInput = () => {
+  const fileInput = ref(null);
+  if (fileInput.value) {
+    fileInput.value = null;
+  }
+};
+</script>

package/templates/nuxt/components/list/ListItem.vue.eta

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex-col border-b border-gray-200 dark:border-gray-700 p-1">
+    <label class="dark:text-gray-400">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+    <div class="dark:text-white text-right">
+      <slot name="default">{{ value }}</slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-04-24
+ * Author: Ks Tan
+ */
+const props = defineProps<{
+  label?: string;
+  value?: string;
+}>();
+</script>

package/templates/nuxt/components/list/ListMessages.vue.eta

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Sidebar v-model:visible="messagesvisible" :header="t('messages')">
+      <ListView :list="list" #default="{ item, index }" @click="openMessage">
+        <div class="flex flex-col">
+          <TextBold v-if="!item.read">{{ item.messageTitle }}</TextBold>
+          <TextSubtitle v-else>{{ item.messageTitle }}</TextSubtitle>
+          <TextSubtitle class="text-xs"><RendererDateTime class="text-sm" v-model="item.created" /></TextSubtitle>
+          <TextSubtitle class="text-sm line-clamp-2">{{
+            item.description
+          }}</TextSubtitle>
+        </div>
+      </ListView>
+      <Dialog v-model:visible="viewmsg" :header="selectedMsg?.messageTitle">
+        <template #default>
+          <div v-if="selectedMsg" class="flex flex-col w-full">
+            <TextSubtitle class="text-sm"
+              ><RendererDateTime v-model="selectedMsg.created"></RendererDateTime
+            ></TextSubtitle>
+            <div class="whitespace-pre-line">{{ selectedMsg?.description}}</div>
+          </div>
+          <div v-else>
+            <TextDanger>{{ t("cannotObtainMessage") }}</TextDanger>
+          </div>
+        </template>
+        <template #footer>
+          <ButtonPrimary @click="viewmsg=false">{{t('close')}}</ButtonPrimary>
+          <ButtonDanger @click="deleteMsg">{{t('delete')}}</ButtonDanger>
+        </template>
+      </Dialog>
+      <ConfirmPopup></ConfirmPopup>
+    </Sidebar>
+  </div>
+</template>
+<script setup lang="ts">
+// import { sysMessage } from "~/composables/messages.generate";
+import { Systemmessage } from "~/simpleapp/generate/openapi";
+import { useConfirm } from "primevue/useconfirm";
+import ButtonDanger from "../button/ButtonDanger.vue";
+const confirm = useConfirm();
+const list = ref<Systemmessage[]>();
+const viewmsg = ref(false);
+const selectedMsg = ref<Systemmessage>();
+const selectedIndex = ref(0)
+const messagesvisible = defineModel<boolean>({ required: true });
+
+const openMessage = async (index: number, item: Systemmessage) => {
+  selectedMsg.value = await useNuxtApp().$SystemmessageDoc().runReadmsg(item?._id??'')
+  selectedIndex.value = index
+  const rowIndex = list.value?.findIndex(listitem=>listitem._id == item._id) ?? -1
+  if(list.value && rowIndex >=0 )list.value[rowIndex].read=true
+  console.log("selectedMsg.value",selectedMsg.value)  
+  viewmsg.value=true
+  
+};
+const deleteMsg = async (clickEvent:MouseEvent) =>{
+
+  confirm.require({
+      target: clickEvent.target as HTMLElement,
+      header: t("deleteRecord"),
+      message: `${t("deleteThisRecord?")}`,
+
+      // icon: "pi pi-exclamation-triangle gap-4",
+      acceptClass: "p-button-danger",
+      accept: async () => {
+        const id = selectedMsg.value?._id ??''
+        const deleteresult = await useNuxtApp().$SystemmessageDoc().delete(id)
+        if(deleteresult) {
+          viewmsg.value = false
+          list.value?.splice(selectedIndex.value,1)
+        }
+      },
+    });
+
+
+  
+}
+const refresh = async ()=>{
+   list.value = await sysMessage.download()
+}
+onMounted(async () => {
+    await refresh()
+    listenDocumentList('systemmessage',()=>{
+      refresh()
+    })
+});
+
+
+</script>

package/templates/nuxt/components/list/ListView.vue.eta

@@ -51,10 +51,7 @@
               index > 0 ? 'border-t-2' : ''
             }`"
           >
-            <NuxtLink :to="getUrl(item)"
-            
-              class="p-2"
-            >
+            <NuxtLink :to="getUrl(item)" :class="`p-2 ${showClickEffect ? 'listlink' :''}`">
               <slot name="default" :item="item" :index="index">
                 <div class="flex flex-row">
                   <div class="flex-1 mr-2 dark:text-white">
@@ -90,7 +87,7 @@
  */
 import { ref } from "vue";
 import { ListItem } from "~/types/listview";
-import _ from 'lodash'
+import _ from "lodash";
 const listviewfilter = ref();
 const props = withDefaults(
   defineProps<{
@@ -102,6 +99,7 @@ const props = withDefaults(
     withFilter?: boolean;
     withAddNew?: boolean;
     showIndex?: boolean;
+    showClickEffect?:boolean
   }>(),
   {
     idField: "_id",
@@ -117,14 +115,13 @@ const clickRow = (item: ListItem) => {
   // emit('clickitem',item)
   // selecteditem.value = item.code
 };
-const getUrl = (item:any)=>{
-  if(props.url && props.idField) {
-    if(_.last(props.url)=='/') return `${props.url}${item[props.idField]}`
-    else return `${props.url}/${item[props.idField]}`
-  }
-  else return undefined
+const getUrl = (item: any) => {
+  if (props.url && props.idField) {
+    if (_.last(props.url) == "/") return `${props.url}${item[props.idField]}`;
+    else return `${props.url}/${item[props.idField]}`;
+  } else return undefined;
   // :to="url ? `${url}/${item[idField]}` : undefined"
-}
+};
 const filterlist = computed(() => {
   let newlist: T[] = [];
   if (!Array.isArray(props.list)) {

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

@@ -1,10 +1,8 @@
 <template>
-  <span v-if="typeof modelValue=='undefined' || typeof modelValue=='string' ">-</span>
-  <span v-else-if="showCurrency">
-    {{
-      currenyValue
-    }}</span
+  <span v-if="typeof modelValue == 'undefined' || typeof modelValue == 'string'"
+    >-</span
   >
+  <span v-else-if="showCurrency"> {{ currenyValue }}</span>
   <span v-else>
     {{ modelValue.toLocaleString(useI18n().defaultLocale, options) }}</span
   >
@@ -16,14 +14,14 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const currenyValue = computed(()=>{
-  if(modelValue.value === undefined) return '-'
+const currenyValue = computed(() => {
+  if (modelValue.value === undefined) return "-";
   return Intl.NumberFormat(useI18n().defaultLocale, {
-        // style: "currency",
-        // currency: getUserProfile()?.currency ?? '',
-        // currencyDisplay: "symbol",
-      }).format(modelValue.value)
-})
+    // style: "currency",
+    // currency: getUserProfile()?.currency ?? '',
+    // currencyDisplay: "symbol",
+  }).format(modelValue.value);
+});
 const options = {
   style: "decimal", // Other options: 'currency', 'percent', etc.
   minimumFractionDigits: 2,
@@ -31,4 +29,5 @@ const options = {
 };
 const modelValue = defineModel<number>({ required: true });
 const props = defineProps<{ showCurrency?: boolean }>();
+
 </script>

package/templates/nuxt/components/select/SelectTemplate.vue.eta

@@ -1,12 +1,36 @@
 <template>
-  <Dropdown
-    @update:modelValue="change"
-    v-model="modelValue"
-    :options="options"
-    optionLabel="label"
-    optionValue="value"
-    :placeholder="placeholder"
-  />
+  <div>
+    <div class="flex flex-row ">
+      <label v-if="!hideLabel" :for="fieldid" class="pt-2">
+      {{t(documentName)}}
+      </label>
+      <ButtonText v-if="allowAddNew" @click="addnew" class="text-xs text-blue-600">
+        <span>{{t('new')}}</span>
+      </ButtonText>
+    </div>
+    <MultiSelect
+      :input-id="fieldid"
+      v-if="multiple"
+      display="chip"
+      @update:modelValue="change"
+      v-model="modelValue"
+      :options="options"
+      optionLabel="label"
+      optionValue="value"
+      :placeholder="placeholder"
+    />
+    <Dropdown
+
+      :input-id="fieldid"
+      v-else
+      @update:modelValue="change"
+      v-model="modelValue"
+      :options="options"
+      optionLabel="label"
+      optionValue="value"
+      :placeholder="placeholder"
+    />
+  </div>
 </template>
 <script setup lang="ts">
 /**
@@ -18,15 +42,17 @@
 import Dropdown from "primevue/dropdown";
 import { ForeignKey, FormCrudEvent } from "~/types";
 const emits = defineEmits(["change"]);
-const modelValue = defineModel<string>();
+const modelValue = defineModel<string | string[]>();
 const list = ref<ForeignKey[]>([]);
-
+const fieldid = randomUUID()
 const props = defineProps<{
   documentName: string;
   placeholder?: string;
   showNull?: boolean;
   allowAddNew?: boolean;
-  filter?: any
+  filter?: any;
+  multiple?: boolean;
+  hideLabel?:boolean
 }>();
 const options = ref<
   {
@@ -35,12 +61,12 @@ const options = ref<
   }[]
 >([]);
 const getListOptions = async () => {
-  const filter = props.filter ?? {}
+  const filter = props.filter ?? {};
   const res = await getDocumentApi(props.documentName).autoComplete("", filter);
   list.value = res.data as ForeignKey[];
-  if (props.allowAddNew)
-    list.value.unshift({ _id: "new", code: "", label: t("addNew") });
-  if (props.showNull)
+  // if (!props.multiple && props.allowAddNew)
+  //   list.value.unshift({ _id: "new", code: "", label: t("addNew") });
+  if (!props.multiple && props.showNull)
     list.value.unshift({ _id: "", code: "", label: t("null") });
   options.value = list.value.map((item) => ({
     value: item._id,
@@ -55,7 +81,12 @@ const getItem = (id: string) => list.value?.find((item) => item._id == id);
 
 const change = (id: string) => {
   const selectedItem = getItem(id);
-  if (selectedItem?._id == "new") {
+  emits("change", id, selectedItem);
+  
+};
+
+const addnew=()=>{
+  
     const doc = getDocument(props.documentName)?.docClass;
     if (doc) {
       const tmpdata = doc?.getReactiveData();
@@ -71,9 +102,7 @@ const change = (id: string) => {
           }
         },
       );
-    }
-  } else {
-    emits("change", id, selectedItem);
+   
   }
-};
+}
 </script>

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

@@ -46,7 +46,7 @@
       </template>
       <template #option="{ index, option }">
         <slot name="option" :index="index" :option="option">
-          <div class="flex flex-row dark:text-white">
+          <div class="flex flex-row text-white">
             <div class="w w-1/3">{{ option.code }}</div>
             <div class="w w-2/3">{{ option.label }}</div>
           </div>
@@ -83,7 +83,7 @@
               </ButtonText>
             </template>
             <template #center>
-              <TextTitle>{{ t(docname) }}</TextTitle>
+              <TextTitle class="text-white">{{ t(docname) }}</TextTitle>
             </template>
             <template #end>
               <div></div>

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

@@ -1,14 +1,16 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex flex-row">
-      <div class="p-2 flex-1">
-        <TextTitle v-if="title">{{ title }}</TextTitle>
-      </div>
-      <div class="pr-2">
-        <ButtonDefault v-if="!readOnly" @click="addRow"
-          ><i class="pi pi-plus"></i
-        ></ButtonDefault>
-      </div>
+    <div class="flex flex-row gap-2">
+      
+        <TextTitle v-if="title" class="flex-1">{{ title }}</TextTitle>
+      
+        <div class="flex flex-row"><slot name="buttons"></slot></div>
+      
+        <div>
+          <ButtonDefault v-if="!readOnly" @click="addRow">
+            <i class="pi pi-plus"></i>
+          </ButtonDefault>
+        </div>
     </div>
     <ListView
       class="p-2 dark:bg-slate-900 bg-slate-200 rounded-lg"
@@ -61,10 +63,9 @@ const updateItem = () => {
   showDialog.value = false;
   emits("itemupdated", rowIndex.value);
 };
-const addRow = (event:MouseEvent) =>{
-
-  emits('addrow', MouseEvent)
-  const lineno =  props.list.length -1
-  showRow(lineno, props.list[lineno])
-}
+const addRow = (event: MouseEvent) => {
+  emits("addrow", MouseEvent);
+  const lineno = props.list.length - 1;
+  showRow(lineno, props.list[lineno]);
+};
 </script>