@7365admin1/layer-common 3.0.3 → 3.0.6

package/components/OnlineFormsConfiguration.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
+      <v-row no-gutters style="gap: 8px">
         <v-btn
           class="text-none"
           rounded="pill"
@@ -32,6 +32,16 @@
             >
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              :color="sortAlpha ? 'primary' : undefined"
+              :title="sortAlpha ? 'Sorted A–Z' : 'Sort A–Z'"
+              @click="sortAlpha = !sortAlpha"
+            >
+              <v-icon>mdi-sort-alphabetical-ascending</v-icon>
+            </v-btn>
             <v-text-field
               v-model="search"
               density="compact"
@@ -59,7 +69,7 @@
         </v-toolbar>
         <v-data-table
           :headers="headers"
-          :items="items"
+          :items="sortedItems"
           item-value="_id"
           items-per-page="10"
           fixed-header
@@ -97,118 +107,55 @@
     </v-dialog>
 
     <!-- Preview Dialog -->
-    <v-dialog v-model="previewDialog" width="450" persistent>
-      <v-card width="100%">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
-          <v-row no-gutters class="mb-4">
-            <v-col cols="12">
-              <strong>Name:</strong> {{ selectedOnlineForm?.formType ?? "N/A" }}
-            </v-col>
-            <v-col v-if="selectedOnlineForm?.attachment" cols="12">
-              <strong>Document: </strong>
-              <NuxtLink
-                :to="getFileUrl(selectedOnlineForm.attachment)"
-                external
-                target="_blank"
-              >
-                View Document
-              </NuxtLink>
-            </v-col>
-            <v-col cols="12">
-              <strong>Status:</strong> {{ selectedOnlineForm?.status ? selectedOnlineForm.status.charAt(0).toUpperCase() + selectedOnlineForm.status.slice(1) : "N/A" }}
-            </v-col>
-            <v-col cols="12">
-              <strong>Inputs:</strong>
-              <div
-                v-if="selectedOnlineForm?.inputs?.length"
-                class="d-flex flex-wrap gap-2 mt-1"
-              >
-                <v-chip
-                  v-for="(input, index) in selectedOnlineForm.inputs"
-                  :key="index"
-                  color="primary"
-                  variant="elevated"
-                  size="small"
-                  class="me-1 mb-2"
-                >
-                  {{ input.label }}
-                </v-chip>
-              </div>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-toolbar class="pa-0" density="compact">
-          <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="text"
-                class="text-none"
-                size="large"
-                @click="previewDialog = false"
-                height="48"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6" class="pa-0" v-if="canUpdate">
-              <v-menu>
-                <template #activator="{ props }">
-                  <v-btn
-                    block
-                    variant="flat"
-                    color="black"
-                    class="text-none"
-                    height="48"
-                    v-bind="props"
-                    tile
-                    :disabled="
-                      !canUpdateOnlineFormConfiguration &&
-                      !canDeleteOnlineFormConfiguration
-                    "
-                  >
-                    More actions
-                  </v-btn>
-                </template>
-                <v-list class="pa-0">
-                  <v-list-item @click="previewDialog = false; formRenderPreviewDialog = true">
-                    <v-list-item-title class="text-subtitle-2">
-                      Preview
-                    </v-list-item-title>
-                  </v-list-item>
-
-                  <v-list-item
-                    v-if="canUpdateOnlineFormConfiguration"
-                    @click="openEditDialog()"
-                  >
-                    <v-list-item-title class="text-subtitle-2">
-                      Edit
-                    </v-list-item-title>
-                  </v-list-item>
+    <v-dialog v-model="previewDialog" width="600" persistent scrollable>
+      <OnlineFormFill
+        v-if="selectedFormDefinition"
+        :definition="selectedFormDefinition"
+        :site-id="siteId"
+        :org-id="orgId"
+        readonly
+        @cancel="previewDialog = false"
+      >
+        <template #title-actions>
+          <v-btn
+            v-if="canUpdate && canUpdateOnlineFormConfiguration"
+            icon
+            size="small"
+            variant="text"
+            color="white"
+            @click="openEditDialog()"
+          >
+            <v-icon>mdi-pencil</v-icon>
+          </v-btn>
+          <v-btn
+            v-if="canDelete && canDeleteOnlineFormConfiguration"
+            icon
+            size="small"
+            variant="text"
+            color="error"
+            @click="openDeleteDialog()"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </template>
+      </OnlineFormFill>
 
-                  <v-list-item
-                    v-if="canDeleteOnlineFormConfiguration"
-                    class="text-red"
-                    @click="openDeleteDialog()"
-                  >
-                    <v-list-item-title class="text-subtitle-2">
-                      Delete
-                    </v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </v-col>
-          </v-row>
+      <!-- Fallback: no block definition found for this form type -->
+      <v-card v-else width="100%">
+        <v-card-text class="text-center pa-10">
+          <v-icon size="48" class="mb-3 text-medium-emphasis">mdi-file-question-outline</v-icon>
+          <div class="text-body-2 text-medium-emphasis">
+            No preview available for "{{ selectedFormType }}".
+          </div>
+        </v-card-text>
+        <v-toolbar density="compact">
+          <v-btn tile block variant="text" class="text-none" size="48" @click="previewDialog = false">
+            Close
+          </v-btn>
         </v-toolbar>
       </v-card>
     </v-dialog>
 
-    <!-- Form Render Preview Dialog -->
-    <OnlineFormRenderPreview
-      v-model="formRenderPreviewDialog"
-      :form="selectedOnlineForm"
-    />
-
     <!-- Delete Dialog -->
     <v-dialog
       v-model="confirmDialog"
@@ -272,14 +219,10 @@
 </template>
 <script setup lang="ts">
 import OnlineFormConfigurationForm from "./OnlineFormConfigurationForm.vue";
-import OnlineFormRenderPreview from "./OnlineFormRenderPreview.vue";
-import useFile from "../composables/useFile";
+import OnlineFormFill from "./OnlineFormFill.vue";
 import useOnlineFormConfiguration from "../composables/useOnlineFormConfiguration";
-
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
+import useOnlineFormPages from "../composables/useOnlineFormPages";
+import useUtils from "../composables/useUtils";
 const props = defineProps({
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
@@ -319,7 +262,7 @@ const props = defineProps({
 });
 
 const { getAll: _getAll, deleteById: _deleteById } = useOnlineFormConfiguration();
-const { getFileUrl } = useFile();
+const { formPages } = useOnlineFormPages();
 
 const page = ref(1);
 const pages = ref(0);
@@ -335,6 +278,12 @@ const siteId = route.params.site as string;
 const orgId = route.params.org as string;
 
 const items = ref<Array<Record<string, any>>>([]);
+const sortAlpha = ref(false);
+const sortedItems = computed(() =>
+  sortAlpha.value
+    ? [...items.value].sort((a, b) => (a.formType ?? "").localeCompare(b.formType ?? ""))
+    : items.value
+);
 
 const { formatDateDDMMYYYYLocal } = useUtils();
 
@@ -374,22 +323,16 @@ watchEffect(() => {
 const createDialog = ref(false);
 const editDialog = ref(false);
 const previewDialog = ref(false);
-const formRenderPreviewDialog = ref(false);
 const selectedOnlineForm = ref<TOnlineForm>({
   _id: "",
   name: "",
   createdAt: "",
   status: "",
   attachment: "",
-  inputs: [
-    {
-      label: "",
-      dataType: "",
-      required: false,
-      multiple: false,
-    },
-  ],
+  inputs: [{ label: "", dataType: "", required: false, multiple: false }],
 });
+const selectedFormType = ref("");
+const selectedFormDefinition = ref<any>(null);
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedOnlineFormId = ref<string | null>(null);
@@ -405,6 +348,17 @@ function parseFieldsToInputs(fields: Record<string, string>): any[] {
 
 function tableRowClickHandler(_: any, data: any) {
   const item = data.item;
+  selectedFormType.value = item.formType ?? "";
+
+  // Parse blocks stored as JSON string, fallback to hardcoded definition
+  let def = null;
+  if (item.fields?.blocks) {
+    try {
+      def = { title: item.formType, blocks: JSON.parse(item.fields.blocks) };
+    } catch {}
+  }
+  selectedFormDefinition.value = def ?? formPages[selectedFormType.value] ?? null;
+
   selectedOnlineForm.value = {
     ...item,
     inputs: parseFieldsToInputs(item.fields ?? {}),
@@ -475,4 +429,5 @@ function successUpdate() {
   getOnlineFormConfigurations();
   showMessage("Online form configuration updated successfully!", "success");
 }
+
 </script>

package/components/RolePermissionFormCreate.vue

@@ -158,7 +158,7 @@
             height="48"
             @click="cancel"
           >
-            Cancel
+            {{ props.cancelText }}
           </v-btn>
         </v-col>
 
@@ -207,6 +207,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  cancelText: {
+    type: String,
+    default: "Cancel"
+  }
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);

package/components/SignaturePad.vue

@@ -1,85 +1,156 @@
 <template>
   <div>
-    <Vue3Signature
-      ref="signatureRef"
-      :sigOption="options"
-      @save="onSave"
-      style="border: 1px solid #ccc; width: 100%; height: 200px"
-    />
-    <div class="mt-4 flex justify-end">
-      <button @click="clear" class="px-4 py-2 bg-red-500 rounded">Clear</button>
-      <button @click="save" class="px-4 py-2 bg-green-500 rounded ml-2">
-        Save
-      </button>
-    </div>
-
-    <div style="position: fixed; top: 20px; right: 20px; z-index: 9999">
-      <Snackbar
-        v-model="messageSnackbar"
-        :text="message"
-        :color="messageColor"
+    <div
+      style="
+        position: relative;
+        border: 1.5px dashed #bbb;
+        border-radius: 6px;
+        background: #fafafa;
+        overflow: hidden;
+      "
+    >
+      <canvas
+        ref="canvasRef"
+        :width="W"
+        :height="H"
+        style="
+          display: block;
+          width: 100%;
+          height: 130px;
+          cursor: crosshair;
+          touch-action: none;
+        "
+        @mousedown="startMouse"
+        @mousemove="moveMouse"
+        @mouseup="stop"
+        @mouseleave="stop"
+        @touchstart.prevent="startTouch"
+        @touchmove.prevent="moveTouch"
+        @touchend="stop"
       />
+      <div
+        v-if="isEmpty"
+        style="
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: none;
+        "
+      >
+        <span class="text-caption text-disabled">Draw your signature here</span>
+      </div>
     </div>
+
+    <v-row no-gutters align="center" class="mt-1" style="min-height: 28px">
+      <span class="text-caption text-medium-emphasis">{{ label }}</span>
+      <v-spacer />
+      <v-btn
+        v-if="!isEmpty"
+        size="x-small"
+        variant="text"
+        color="error"
+        class="text-none"
+        @click="clear"
+      >
+        Clear
+      </v-btn>
+    </v-row>
   </div>
 </template>
-
 <script setup lang="ts">
-import { ref, defineProps, defineEmits } from "vue";
-import Vue3Signature from "vue3-signature";
-
 const props = defineProps({
-  modelValue: String,
-  hideToast: {
-    type: Boolean,
-    default: false,
-  }
+  modelValue: { type: String, default: "" },
+  label: { type: String, default: "" },
+  hideToast: { type: Boolean, default: false },
 });
-
 const emit = defineEmits(["update:modelValue"]);
 
-const signatureRef = ref();
+// Internal canvas resolution (retina-friendly)
+const W = 960;
+const H = 260;
 
-const options = {
-  penColor: "black",
-  backgroundColor: "white",
-};
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const drawing = ref(false);
+const isEmpty = ref(true);
+let px = 0;
+let py = 0;
 
-// Snackbar control
-const message = ref("");
-const messageColor = ref("");
-const messageSnackbar = ref(false);
+function getCtx() {
+  const c = canvasRef.value?.getContext("2d");
+  if (c) {
+    c.strokeStyle = "#111";
+    c.lineWidth = 2.5;
+    c.lineCap = "round";
+    c.lineJoin = "round";
+  }
+  return c ?? null;
+}
 
-function showMessage(msg: string, color: string) {
-  message.value = msg;
-  messageColor.value = color;
-  messageSnackbar.value = true;
+function scaled(clientX: number, clientY: number) {
+  const rect = canvasRef.value!.getBoundingClientRect();
+  return {
+    x: ((clientX - rect.left) / rect.width) * W,
+    y: ((clientY - rect.top) / rect.height) * H,
+  };
 }
 
-function onSave(data: string) {
-  emit("update:modelValue", data);
-  if(!props.hideToast) {
-    showMessage("Signature saved successfully.", "success");
-  }
+function startMouse(e: MouseEvent) {
+  drawing.value = true;
+  const p = scaled(e.clientX, e.clientY);
+  px = p.x;
+  py = p.y;
 }
 
-function save() {
-  const signatureData = signatureRef.value?.save("image/jpeg");
-  if (signatureData) {
-    emit("update:modelValue", signatureData);
-      if(!props.hideToast) {
-        showMessage("Signature saved successfully.", "success");
-      }
-  } else {
-    if(!props.hideToast) {
-      showMessage("No signature to save.", "error");
-    }
+function moveMouse(e: MouseEvent) {
+  if (!drawing.value) return;
+  paint(scaled(e.clientX, e.clientY));
+}
+
+function startTouch(e: TouchEvent) {
+  drawing.value = true;
+  const t = e.touches[0];
+  const p = scaled(t.clientX, t.clientY);
+  px = p.x;
+  py = p.y;
+}
+
+function moveTouch(e: TouchEvent) {
+  if (!drawing.value) return;
+  paint(scaled(e.touches[0].clientX, e.touches[0].clientY));
+}
+
+function stop() {
+  if (drawing.value && !isEmpty.value) {
+    emit("update:modelValue", canvasRef.value!.toDataURL("image/png"));
   }
+  drawing.value = false;
+}
+
+function paint({ x, y }: { x: number; y: number }) {
+  const c = getCtx();
+  if (!c) return;
+  c.beginPath();
+  c.moveTo(px, py);
+  c.lineTo(x, y);
+  c.stroke();
+  px = x;
+  py = y;
+  isEmpty.value = false;
 }
 
 function clear() {
-  signatureRef.value?.clear();
-  if(!props.hideToast) {
-    showMessage("Signature cleared.", "success");
-  }
+  const cv = canvasRef.value;
+  if (!cv) return;
+  cv.getContext("2d")?.clearRect(0, 0, W, H);
+  isEmpty.value = true;
+  emit("update:modelValue", "");
 }
+
+// Allow parent to programmatically clear by setting modelValue to ""
+watch(
+  () => props.modelValue,
+  (v) => { if (!v && !isEmpty.value) clear(); }
+);
 </script>

package/composables/useMember.ts

@@ -109,13 +109,15 @@ export default function useMember() {
     app: string;
     siteId?: string;
     siteName?: string;
+    onboardingRequired?: boolean;
   }) {
     return useNuxtApp().$api<TMember>("/api/members/direct", {
       method: "POST",
       body: payload,
-    });
+    })
   }
 
+
   function updateMemberSite(id: string, siteId: string, siteName: string) {
     return useNuxtApp().$api(`/api/members/site`, {
       method: "PUT",
@@ -137,6 +139,15 @@ export default function useMember() {
     );
   }
 
+  function completeMemberOnboarding(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/members/${id}/onboarding/complete`,
+      {
+        method: "PUT",
+      }
+    );
+  }
+
   return {
     members,
     member,
@@ -156,5 +167,6 @@ export default function useMember() {
     updateMemberSite,
     getAllByUserId,
     getByUserTypeOrg,
+    completeMemberOnboarding,
   };
 }