@7365admin1/layer-common 1.8.0

package/components/Dialog/DeleteConfirmation.vue

@@ -0,0 +1,51 @@
+<template>
+    <v-card width="100%" :disabled="loading" :loading="loading">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+            <span> {{ promptTitle }}</span>
+
+            <span v-if="message" class="text-error mt-2">
+                {{ message }} Do you want to delete anyway?
+            </span>
+        </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" tile @click="emit('close')"
+                        height="48">
+                        Cancel
+                    </v-btn>
+                </v-col>
+
+                <v-col cols="6" class="pa-0">
+                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
+                        @click="emit('delete')">
+                        Delete
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    message: {
+        type: String,
+        default: ""
+    },
+    promptTitle: {
+        type: String,
+        default: "Are you sure want to delete this? "
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(["close", "delete"])
+
+</script>
+
+<style scoped></style>

package/components/Dialog/ReplaceAutofillPrompt.vue

@@ -0,0 +1,49 @@
+<template>
+    <v-card width="100%" :disabled="loading" :loading="loading">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+            <v-row no-gutters>
+                <v-col cols="12" class="font-weight-bold text-h6">{{ promptTitle }}</v-col>
+                <v-col cols="12" class="mt-5">
+                    <span>
+                        By proceeding, your previous user inputs will be replaced.
+                    </span>
+                </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" tile @click="emit('close')" height="48">
+                        Cancel
+                    </v-btn>
+                </v-col>
+
+                <v-col cols="6" class="pa-0">
+                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
+                        @click="emit('proceed')">
+                        Proceed
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    promptTitle: {
+        type: String,
+        default: "Update user details? "
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(["close", "proceed"])
+
+</script>
+
+<style scoped></style>

package/components/Dialog/UpdateMoreAction.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <template v-if="$slots.header">
+        <slot name="header" :title="title" :onClose="onClose" />
+      </template>
+      <template v-else>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5 text-capitalize">{{
+            title
+          }}</span>
+        </v-row>
+      </template>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0" :class="contentNoPadding ? 'pa-0' : ''">
+      <slot name="content" />
+    </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="emit('close')"
+            height="48"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6" class="pa-0" >
+          <v-menu contained>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item v-if="canUpdate" @click="emit('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ editButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ deleteButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  editButtonLabel: {
+    type: String,
+    default: "Edit",
+  },
+  deleteButtonLabel: {
+    type: String,
+    default: "Delete",
+  },
+  title: {
+    type: String,
+    default: "Details",
+  },
+  contentNoPadding: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["close", "edit", "delete"]);
+const { canUpdate, editButtonLabel, deleteButtonLabel, title } = prop;
+</script>
+
+<style scoped></style>

package/components/DocumentForm.vue

@@ -0,0 +1,187 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ prop.mode }} Document
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Attachment" />
+          <InputFileV2
+            v-model="document.attachment"
+            :multiple="false"
+            :max-length="10"
+            title="Upload PDF Files"
+            accept=".pdf, .doc, .docx, .xls, .xlsx, .txt"
+          />
+        </v-col>
+
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Name" />
+          <v-text-field
+            v-model.trim="document.name"
+            density="comfortable"
+          ></v-text-field>
+        </v-col>
+
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Type" />
+          <v-select
+            v-model="document.type"
+            :items="documentTypes"
+            density="comfortable"
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <v-row no-gutters>
+            <v-col cols="12" class="text-center">
+              <span
+                class="text-none text-subtitle-2 font-weight-medium text-error"
+              >
+                {{ message }}
+              </span>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="
+              !validForm ||
+              disable ||
+              document.attachment.length == 0 ||
+              document.name == ''
+            "
+            @click="submit"
+            :loading="disable"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  document: {
+    type: Object as PropType<TDocument>,
+    default: () => ({
+      name: "",
+      attachment: [],
+      type: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success"]);
+
+const { add, updateById } = useDocument();
+const { getFileById } = useFile();
+
+const validForm = ref(false);
+const disable = ref(false);
+const message = ref("");
+
+const documentTypes = ref(["Online Form", "Other"]);
+
+const document = ref<Record<string, any>>({
+  name: "",
+  attachment: [],
+  type: "",
+});
+
+const route = useRoute();
+const siteId = route.params.site as string;
+const orgId = route.params.org as string;
+
+if (prop.mode === "edit") {
+  document.value.name = prop.document.name;
+  document.value.attachment = [prop.document.attachment];
+  document.value.type = prop.document.type;
+}
+
+watch(
+  () => document.value.attachment,
+  async (newVal) => {
+    if (newVal && prop.mode !== "edit") {
+      const fileData = await getFileById(newVal);
+      if (fileData) {
+        document.value.name = fileData.data.name;
+      }
+    }
+  }
+);
+
+function cancel() {
+  //   createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+
+async function submit() {
+  disable.value = true;
+  try {
+    if (prop.mode === "add") {
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+        type: document.value.type || "Other",
+        status: "active",
+        org: orgId,
+        site: siteId,
+      };
+      await add(payload);
+    }
+
+    if (prop.mode === "edit") {
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+        type: document.value.type,
+      };
+      await updateById(prop.document._id ?? "", payload);
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error.response?._data?.message || "Failed to create document";
+  } finally {
+    disable.value = false;
+  }
+}
+</script>