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

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

@@ -1,73 +1,90 @@
 <template>
-  <button
+  <div
     @click="openUploadDialog"
     :title="selectedBase64Img"
-    class="place-content-center image-to-base64-uploader rounded-lg border block"
+    class="vvv 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>
+    <ClientOnly>
+      <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" -->
+      <Dialog
+        v-if="dialogVisible"
+        v-model:visible="dialogVisible"
+        header="Image Upload"
+        :pt="{ root: { class: 'w-4/5' } }"
+      >
+        <div class="w-full grid grid-cols-2 gap-2">
+          <div class="w-7/8 border rounded p-4">
+            <TabView lazy>
+              <TabPanel :header="t('upload')">
+                <div class="upload-container">
+                  <input
+                    type="file"
+                    ref="fileInput"
+                    accept="image/*"
+                    @change="handleImageUpload"
+                  />
+                </div>
+              </TabPanel>
+              <TabPanel :header="t('webcam')">
+                <div class="webcam-container h h-1/6">
+                  <WebCamUI :fullscreenState="false" @photoTaken="photoTaken" />
+                </div>
+              </TabPanel>
+            </TabView>
+          </div>
+          <div id="preview" class="w-7/8 border rounded p-4">
+            <Cropper
+              v-if="scaledImage"
+              ref="cropperInstance"
+              :src="scaledImage"
+              :stencil-props="{ aspectRatio: 1 }"
+              :options="cropperOptions"
+              @change="changeChropper"
+            />
+          </div>
         </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 #footer>
+          <div class="flex flex-row gap-4">
+            <ButtonDefault @click="dialogVisible = false">{{
+              t("cancel")
+            }}</ButtonDefault>
+            <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
+          </div>
+        </template>
+      </Dialog>
+    </ClientOnly>
+  </div>
 </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 { defineEmits } from "vue";
+import { WebCamUI } from "vue-camera-lib";
+import VueCameraLib from "vue-camera-lib";
+
 // 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 image = ref<string | null>(null);
 const emit = defineEmits<{
   (event: "image-uploaded", imageData: string): void;
 }>();
 
+// Use camera reference to call functions
+const photoTaken = (data: any) => {
+  scaledImage.value = data.image_data_url;
+};
 const openUploadDialog = () => {
   dialogVisible.value = true;
 };
@@ -79,8 +96,8 @@ const handleImageUpload = (event) => {
     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 maxWidth = 400; // Set your desired maximum width
+        const maxHeight = 300; // 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;

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

@@ -6,10 +6,15 @@
     :sub-title-field="uniqueKey"
     #default="{ item, index }"
   >
-    <div class="cursor-pointer flex flex-row gap-2" @click="emits('click', item)">
-      <slot name="default" :index="index" :item="item">      
-        <TextTitle class="flex-1">{{ item[(documentTitle as  keyof typeof item) ] }}</TextTitle>
-        <TextSubtitle >{{ item[uniqueKey as  keyof typeof item] }}</TextSubtitle>
+    <div
+      class="cursor-pointer flex flex-row gap-2"
+      @click="emits('click', item)"
+    >
+      <slot name="default" :index="index" :item="item">
+        <TextMain class="flex-1">{{
+          item[documentTitle as keyof typeof item]
+        }}</TextMain>
+        <TextSubsubtitle>{{ item[uniqueKey as keyof typeof item] }}</TextSubsubtitle>
       </slot>
     </div>
   </ListView>
@@ -24,7 +29,7 @@
 import { SearchBody } from "~/types";
 const emits = defineEmits(["click"]);
 const props = defineProps<{
-  recordlist: T[];  
+  recordlist: T[];
   uniqueKey?: string;
   documentTitle?: string;
 }>();

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

@@ -1,5 +1,6 @@
 <template>
   <DataTable
+    ref="documentlisttable" 
     v-bind="$attrs"
     stripedRows
     dataKey="_id"
@@ -29,15 +30,17 @@
             </h1>
           </slot>
         </div>
-        <span class="p-input-icon-left flex-1">
-          <i class="pi pi-search mt-4 ml-2 text-gray-400 absolute" />
+        <div class="p-input-icon-left gap-2 flex flex-row">
+          <ButtonPrimary @click="exportData">
+            <i class="pi pi-external-link"/>
+          </ButtonPrimary>
           <InputText
             type="search"
             v-model="filters['global'].value"
-            class="text-right"
+            class="w-full dark:text-white text-sm"
             placeholder="Keyword Search"
           />
-        </span>
+        </div>
       </div>
     </template>
     <!-- no data found -->
@@ -46,10 +49,10 @@
         <div class="text-3xl text-gray-400 pi pi-exclamation-circle"></div>
         <div class="text-3xl text-gray-400">{{ t("noDataFound") }}</div>
       </div>
-    </template>    
-      <slot name="default">
-        <Column header="undefineColumns"></Column>
-      </slot>    
+    </template>
+    <slot name="default">
+      <Column header="undefineColumns"></Column>
+    </slot>
   </DataTable>
 </template>
 <script setup lang="ts" generic="T">
@@ -65,18 +68,23 @@ import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import renderComponent from "~/components/renderer";
 import { emit } from "process";
+import ButtonPrimary from "../button/ButtonPrimary.vue";
+const documentlisttable = ref()
 const props = defineProps<{
-  value: T[]
-  title: string
-  columns: string[]
-  uniqueKey: string
-  documentTitle: string
+  value: T[];
+  title: string;
+  columns: string[];
+  uniqueKey: string;
+  documentTitle: string;
 }>();
 const emits = defineEmits(["selectRow"]);
 const clickRow = (eventdata: any) => {
   emits("selectRow", eventdata.data);
 };
 
+const exportData = ()=>{
+  documentlisttable.value.exportCSV()
+}
 const filters = ref({
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
 });

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Sidebar v-model:visible="messagesvisible" :header="t('messages')">
+    <Sidebar v-model:visible="messagesvisible" position="right" :header="t('messages')">
       <ListView :list="list" #default="{ item, index }" @click="openMessage">
         <div class="flex flex-col">
           <TextBold v-if="!item.read">{{ item.messageTitle }}</TextBold>

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

@@ -1,28 +1,50 @@
 <template>
   <div class="relative">
+    <div v-if="header">
+      <slot name="header">
+        <TextMain class="text-gray-800 pl-2 pt-2">{{ header }}</TextMain>
+      </slot>
+      <hr class="mt-2" />
+    </div>
     <div v-if="withFilter" class="flex flex-row p-2">
-      <InputGroup>
-          <InputGroupAddon v-if="filter">
+      <InputGroup :pt="{ root: { class: 'p-0' } }">
+        <InputGroupAddon
+          v-if="filter !== undefined && Object.keys(filter).length > 0"
+          :pt="{
+            root: {
+              class:
+                'p-0 pi pi-filter cursor-pointer bg-warning-400 text-white p-3',
+            },
+          }"
+          @click="showMoreFilter"
+        >
+        </InputGroupAddon>
+        <InputGroupAddon
+          v-else
+          :pt="{ root: { class: 'p-0 pi pi-filter cursor-pointer p-3' } }"
+          @click="showMoreFilter"
+        >        
+        </InputGroupAddon>
+        <InputText
+          :placeholder="t('searchKeyword')"
+          v-model="searchvalue"
+          type="search"
+          :pt="{ root: { class: 'p-1' } }"
+          ref="listviewfilter"
+        />
+        <InputGroupAddon
+          :pt="{
+            root: {
+              class:
+                'p-0 cursor-pointer bg-primary-400 pi pi-plus p-3 text-white',
+            },
+          }"
+          v-if="withAddNew"
+          @click="emits('add')"
+        >
 
-             <ButtonDefault @click="showMoreFilter" v-if="Object.keys(filter)==0">
-              <i class="pi pi-filter"></i>
-            </ButtonDefault>
-            <ButtonWarning @click="showMoreFilter" v-else>
-              <i class="pi pi-filter"></i>
-            </ButtonWarning>
-          </InputGroupAddon>
-          <InputText
-              :placeholder="t('searchKeyword')"
-              v-model="searchvalue"
-              class="w-full dark:text-white text-sm "
-              type="search"
-              ref="listviewfilter"
-            />
-          <InputGroupAddon v-if="withAddNew">            
-            <ButtonPrimary @click="emits('add')">
-              <i class="pi pi-plus"></i>
-            </ButtonPrimary>
-          </InputGroupAddon>
+        </InputGroupAddon>
+        <slot name="inputAddOn"></slot>
       </InputGroup>
     </div>
 
@@ -54,7 +76,7 @@
             <span>{{ item[titleField][0] }}</span>
           </div>
           <div
-            @click="onClick(index, item)"
+            @click="onClick(index, item, $event)"
             :class="`border-l-none border-r-none listview-item dark:border-t-gray-700 ${
               index > 0 ? 'border-t-2' : ''
             }`"
@@ -88,18 +110,21 @@
       </div>
     </div>
 
-
-    <Dialog v-model:visible="visibleMoreFilter" :header="t('filter')">
-      <slot name="filter">
-        define filter in #filter
-      </slot>
+    <Dialog
+      v-model:visible="visibleMoreFilter"
+      :header="t('filter')"
+      :pt="{ root: { class: 'w-1/3' } }"
+    >
+      <slot name="filter"> define filter in #filter </slot>
       <template #footer>
-        <div class="flex flex-row">
+        <div class="flex flex-row gap-4">
           <ButtonDefault @click="clearFilter" class="flex flex-row p-2">
-            <i class="pi pi-times mr-1"/> <span class="mr-1">{{t('clear')}}</span>
+            <i class="pi pi-times mr-1" />
+            <span class="mr-1">{{ t("clear") }}</span>
           </ButtonDefault>
-          <ButtonPrimary  @click="runFilter" class="flex flex-row p-2">
-            <i class="pi pi-filter mr-1"/> <span class="mr-1">{{t('ok')}}</span>
+          <ButtonPrimary @click="runFilter" class="flex flex-row p-2">
+            <i class="pi pi-filter mr-1" />
+            <span class="mr-1">{{ t("ok") }}</span>
           </ButtonPrimary>
         </div>
       </template>
@@ -116,17 +141,19 @@
 import { ref } from "vue";
 import { ListItem } from "~/types/listview";
 import _ from "lodash";
-const visibleMoreFilter = ref(false)
+const visibleMoreFilter = ref(false);
 const listviewfilter = ref();
 const props = withDefaults(
   defineProps<{
     list: T[];
     url?: string;
+    urlsuffix?: string;
+    header?: string;
     titleField?: string;
     idField?: string;
     subTitleField?: string;
     withFilter?: boolean;
-    filter?:Object;
+    filter?: { [key: string]: any };
     withAddNew?: boolean;
     showIndex?: boolean;
     showClickEffect?: boolean;
@@ -138,7 +165,7 @@ const props = withDefaults(
 const letters = ref<string[]>([]);
 let lastchar = "";
 
-const emits = defineEmits(["add", "runFilter", "clearFilter","click"]);
+const emits = defineEmits(["add", "runFilter", "clearFilter", "click"]);
 const searchvalue = ref("");
 const selecteditem = ref("");
 const clickRow = (item: ListItem) => {
@@ -146,9 +173,14 @@ const clickRow = (item: ListItem) => {
   // selecteditem.value = item.code
 };
 const getUrl = (item: any) => {
+  const urlsuffix =
+    props.urlsuffix === undefined || props.urlsuffix == ""
+      ? ""
+      : "/" + props.urlsuffix;
   if (props.url && props.idField) {
-    if (_.last(props.url) == "/") return `${props.url}${item[props.idField]}`;
-    else return `${props.url}/${item[props.idField]}`;
+    if (_.last(props.url) == "/")
+      return `${props.url}${item[props.idField]}${urlsuffix}`;
+    else return `${props.url}/${item[props.idField]}${urlsuffix}`;
   } else return undefined;
   // :to="url ? `${url}/${item[idField]}` : undefined"
 };
@@ -158,15 +190,21 @@ const filterlist = computed(() => {
     return [];
   }
   if (props.list !== undefined) {
+    const searchstr = searchvalue.value.toLowerCase();
+
     newlist = props.list.filter((item: T) => {
-      return (
-        String(item[props.titleField ?? ""])
-          .toLowerCase()
-          .includes(searchvalue.value.toLowerCase()) ||
-        String(item[props.subTitleField ?? ""])
-          .toLowerCase()
-          .includes(searchvalue.value.toLowerCase())
-      );
+      let res = false;
+      if (searchstr.length == 0) return true;
+      if (props.titleField && item[props.titleField]) {
+        res = item[props.titleField].toLowerCase().includes(searchstr);
+      }
+      if (res) return true;
+
+      if (props.subTitleField && item[props.subTitleField])
+        res = item[props.subTitleField].toLowerCase().includes(searchstr);
+      if (res) return true;
+
+      return false;
     });
   }
 
@@ -198,21 +236,21 @@ const showCategoryBar = (letter: string) => {
   }
 };
 
-const onClick = (index: number, data: T) => {
-  emits("click", index, data);
+const onClick = (index: number, data: T, event: Event | MouseEvent) => {
+  emits("click", index, data, event);
 };
 
-const showMoreFilter = ()=>{
-  visibleMoreFilter.value=true
-}
-const clearFilter = () =>{  
-  visibleMoreFilter.value = false
-  emits('clearFilter')
-}
+const showMoreFilter = () => {
+  visibleMoreFilter.value = true;
+};
+const clearFilter = () => {
+  visibleMoreFilter.value = false;
+  emits("clearFilter");
+};
 const runFilter = () => {
-  visibleMoreFilter.value = false
-  emits('runFilter')
-}
+  visibleMoreFilter.value = false;
+  emits("runFilter");
+};
 onMounted(() => {
   // if(props.withFilter) listviewfilter.value.$el.focus()
 });

package/templates/nuxt/components/overlay/OverlayPanelWithToolBar.vue.eta

@@ -1,14 +1,16 @@
 <template>
   <Sidebar
-    position="right"
+    :position="position ?? 'right'"
     v-if="showDialog"
     v-model:visible="showDialog"
     modal
     :show-close-icon="false"
+    :dismissable="dismissable"
+    :pt="{root:{class:'w-2/3 border-0 border-l border-l-gray-500'}}"
     #container
   >
     <div class="overflow-y-scroll">
-      <MobileToolbar class="bg-gray-800 text-white">
+      <MobileToolbar class="">
         <template #start>
           <slot name="headerLeft"></slot>
         </template>
@@ -19,7 +21,7 @@
           <slot name="headerRight"></slot>
         </template>
       </MobileToolbar>
-      <div >
+      <div class="p-2">
         <slot name="default"></slot>
       </div>
     </div>
@@ -33,7 +35,12 @@
  * Author: Ks Tan
  */
 const showDialog = defineModel<boolean>({ required: true });
-const props = defineProps<{ closeEventName: string }>();
+const props = defineProps<{
+  closeEventName: string;
+  dismissable?: boolean;
+  position?: "right" | "full" | "left" | "top" | "bottom" | undefined;
+}>();
+// const position = ref(props?.position ?? 'right')
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
   if (props.closeEventName == closeEventName) {
     showDialog.value = false;

package/templates/nuxt/components/overlay/OverlaySideBarCrud.vue.eta

@@ -3,12 +3,18 @@
     position="right"
     v-if="showDialog"
     v-model:visible="showDialog"
-    modal
-    :show-close-icon="false"
+    :dismissable="dismissable"
+    modal    
     #container
-  >
-    <div class="overflow-y-scroll">
-      <slot name="default"></slot>
+  > 
+    <div class="border-l-2 pl-2">
+      <div class="flex flex-row justify-end p-2" v-if="title">
+        <TextTitle class="dark:text-white line-clamp-2 flex-1">{{title}}</TextTitle>
+        <ButtonText @click="showDialog=false"><i class="pi pi-times" /></ButtonText>
+      </div>
+      <div class="overflow-y-scroll">
+        <slot name="default"></slot>
+      </div>
     </div>
   </Sidebar>
 </template>
@@ -20,7 +26,12 @@
  * Author: Ks Tan
  */
 const showDialog = defineModel<boolean>({ required: true });
-const props = defineProps<{ closeEventName: string }>();
+const props = defineProps<{ 
+  closeEventName: string   
+  title?:string
+  dismissable?:boolean
+
+}>();
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
   if (props.closeEventName == closeEventName) {
     showDialog.value = false;

package/templates/nuxt/components/overlay/OverlayViewer.vue.eta

@@ -1,16 +1,26 @@
 <template>
-  <Sidebar
-    position="bottom"
+  <Dialog
     v-if="showDialog"
     v-model:visible="showDialog"
-    modal
+    maximizable
+    :dismissable="false"
     :show-close-icon="false"
-    #container
+    :closeOnEscape="false"
+    :modal="true"
+    :pt="{
+      root: { class: 'w-11/12 border top-0' },
+      mask: {
+        style: 'backdrop-filter: blur(2px);background-color: red;',
+      },
+    }"
   >
-    <div class="overflow-y-scroll">
+    <template #header>
+      <slot name="header">{{ t(title) }}</slot>
+    </template>
+    <div class="overflow-y-scroll bodycolorclass">
       <slot name="default"></slot>
     </div>
-  </Sidebar>
+  </Dialog>
 </template>
 <script lang="ts" setup>
 /**