@7365admin1/layer-common 1.8.0

package/components/NavigationItem.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-list-group v-if="children && children.length">
+    <template #activator="{ props: groupProps }">
+      <v-list-item
+        v-bind="groupProps"
+        :prepend-icon="icon"
+        class="text-subtitle-2"
+        @click.stop="onParentClick"
+      >
+        {{ title }}
+      </v-list-item>
+    </template>
+
+    <NavigationItem
+      v-for="(child, childIndex) in children"
+      :key="`${child.title}-${childIndex}`"
+      :title="child.title"
+      :icon="child.icon"
+      :route="child.route"
+      :children="child.children"
+    />
+  </v-list-group>
+
+  <v-list-item
+    v-else-if="props.route && props.route.name"
+    :prepend-icon="icon"
+    :to="props.route"
+    class="text-subtitle-2"
+  >
+    {{ title }}
+  </v-list-item>
+
+  <v-list-item
+    v-else-if="props.link"
+    :prepend-icon="icon"
+    :href="props.link"
+    class="text-subtitle-2"
+  >
+    {{ title }}
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: "Title",
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  route: {
+    type: Object as PropType<Record<string, any>>,
+    default() {
+      return { name: "" };
+    },
+  },
+  link: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  children: {
+    type: Array<TNavigationItem>,
+    required: false,
+    default: () => [],
+  },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+
+function onParentClick() {
+  if (props.route && props.route.name) {
+    navigateTo(props.route);
+  }
+}
+</script>

package/components/NumberSettingField.vue

@@ -0,0 +1,107 @@
+<template>
+<v-row no-gutters>
+    <v-form v-model="valid">
+        <v-row>
+            <v-col cols="6">
+                <InputLabel class="text-capitalize font-weight-bold" :title="title" :required="required" />
+                <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" />
+            </v-col>
+            
+            <v-col cols="6">
+                <v-btn color="primary" class="text-none mt-6" size="large" variant="flat"
+                :disabled="!valid || disabled" :loading="loading || updating" text="Save" @click="handleSave" />
+            </v-col>
+        </v-row>
+    </v-form>
+<Snackbar v-model="toastObject.show" :text="toastObject.message" :color="toastObject.color" />
+</v-row>
+</template>
+
+<script setup lang="ts">
+import useSiteSettings from '../composables/useSiteSettings';
+
+const props = defineProps({
+    title: { type: String, required: true },
+    required: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    type: { type: String as PropType<'blocks' | 'guard_posts'>, required: true},
+    disabled: {type: Boolean, default: false},
+    siteId: { type: String, required: true }
+});
+
+const { updateSite, setSiteGuardPosts } = useSiteSettings()
+
+
+const count = defineModel<number>({ default: 0 });
+const valid = ref(false);
+const updating = ref(false)
+
+const toastObject = reactive({
+  show: false,
+  message: "",
+  color: "",
+});
+
+
+const emits = defineEmits(["success", "error"]);
+
+
+const { requiredRule } = useUtils();
+
+function validNumber(value: number) {
+    return value > 0 || "Number must be greater than zero.";
+}
+
+const rules = computed(() => {
+    const arr = [];
+    if (props.required) {
+        arr.push(requiredRule);
+        arr.push(validNumber);
+    }
+    return arr;
+});
+
+
+
+
+async function handleSave() {
+    if(!props.siteId){
+        return emits('error', 'Site ID is required')
+    }
+
+    updating.value = true;
+
+    try {
+    if(props.type === 'blocks'){
+        await updateSite(props.siteId, { block: count.value});
+        handleSuccess('The number of blocks has been updated successfully!')
+    } else if (props.type) {
+        await setSiteGuardPosts(props.siteId, count.value)
+        handleSuccess('The number of guard posts has been updated successfully!')
+       
+    } else {
+        throw new Error('Invalid type Prop provided.')
+    }
+
+     emits('success')
+  } catch (error: any) {
+    const message = error?.data?.message || `Error updating ${props.type.replace('_', ' ')}`;
+    handleError(message)
+  } finally {
+    updating.value = false;
+  }
+}
+
+const handleSuccess = (message: string) => {
+  toastObject.show = true;
+  toastObject.message = message;
+  toastObject.color = "success";
+};
+
+const handleError = (message: string) => {
+  toastObject.show = true;
+  toastObject.message = message;
+  toastObject.color = "error";
+};
+
+</script>

package/components/OnlineFormConfigurationForm.vue

@@ -0,0 +1,290 @@
+<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 }} Online Form
+        </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="Attachment" />
+          <v-select
+            v-model="onlineForm.attachment"
+            :items="attachments"
+            item-title="name"
+            item-value="attachment"
+            density="comfortable"
+            type="text"
+          />
+        </v-col>
+
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Name" />
+          <v-text-field
+            v-model.trim="onlineForm.name"
+            density="comfortable"
+          ></v-text-field>
+        </v-col>
+
+        <template v-for="(inputLabel, inputLabelIndex) in onlineForm.inputs">
+          <v-row class="px-6">
+            <v-col cols="6">
+              <InputLabel
+                class="text-capitalize"
+                :title="`Label ${+inputLabelIndex + 1}`"
+              />
+              <v-text-field
+                v-model.trim="inputLabel.label"
+                density="comfortable"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="6">
+              <InputLabel
+                class="text-capitalize"
+                :title="`Data Type ${+inputLabelIndex + 1}`"
+              />
+              <v-select v-model="inputLabel.dataType" :items="dataTypes" />
+            </v-col>
+            <v-col cols="6">
+              <InputLabel
+                class="text-capitalize"
+                :title="`Required ${+inputLabelIndex + 1}`"
+              />
+              <v-checkbox v-model="inputLabel.required" />
+            </v-col>
+            <v-col cols="6">
+              <InputLabel
+                class="text-capitalize"
+                :title="`Multiple ${+inputLabelIndex + 1}`"
+              />
+              <v-checkbox v-model="inputLabel.multiple" />
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                block
+                color="red"
+                variant="text"
+                class="text-none font-weight-bold"
+                text="Remove"
+                :disabled="onlineForm.inputs.length === 1"
+                @click="onlineForm.inputs.splice(inputLabelIndex, 1)"
+              />
+            </v-col>
+          </v-row>
+          <v-divider class="my-3" />
+        </template>
+
+        <v-col cols="12" class="px-6">
+          <v-btn
+            block
+            color="primary"
+            variant="text"
+            class="text-none font-weight-bold"
+            text="Add"
+            @click="addNewInput"
+          ></v-btn>
+        </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"
+          >
+            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 ||
+              onlineForm.attachment.length == 0 ||
+              onlineForm.name == ''
+            "
+            @click="submit"
+            :loading="disable"
+          >
+            {{ prop.mode === "edit" ? "Update" : "Submit" }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  onlineForm: {
+    type: Object as PropType<TOnlineForm>,
+    default: () => ({
+      name: "",
+      attachment: "",
+      inputs: [
+        {
+          label: "",
+          dataType: "",
+          required: true,
+          multiple: false,
+        },
+      ],
+      status: "active",
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success"]);
+
+const validForm = ref(false);
+const disable = ref(false);
+const message = ref("");
+
+const route = useRoute();
+const siteId = route.params.site as string;
+const orgId = route.params.org as string;
+
+const attachments = ref<any>([
+  {
+    _id: "",
+    name: "",
+    attachment: "",
+    type: "",
+  },
+]);
+
+const { getDocumentsBySiteId: _getAllDocuments } = useDocument();
+const { add: _add, updateOnlineFormById: _update } = useOnlineForm();
+
+const onlineForm = ref<Record<string, any>>({
+  name: "",
+  attachment: "",
+  inputs: [
+    {
+      label: "Name",
+      dataType: "Text Input",
+      required: true,
+      multiple: false,
+    },
+  ],
+  status: "active",
+});
+
+const dataTypes = ref([
+  "Text Input",
+  "Text Area",
+  "Date Input",
+  "Select",
+  "Checkbox",
+]);
+
+const {
+  data: getDocumentReq,
+  refresh: getDocuments,
+  status: getAllReqStatus,
+} = useLazyAsyncData("get-all-documents", () =>
+  _getAllDocuments(siteId, "Online Form")
+);
+
+watchEffect(() => {
+  if (getDocumentReq.value) {
+    attachments.value = getDocumentReq.value;
+  }
+});
+
+if (prop.mode === "edit") {
+  onlineForm.value.attachment = prop.onlineForm.attachment;
+  onlineForm.value.name = prop.onlineForm.name;
+  onlineForm.value.inputs = prop.onlineForm.inputs;
+}
+
+watch(
+  () => onlineForm.value.attachment,
+  (newVal) => {
+    if (newVal) {
+      const val = attachments.value.find(
+        (attachment: any) => attachment.attachment === newVal
+      );
+      onlineForm.value.name = val.name;
+    }
+  }
+);
+
+function cancel() {
+  emit("cancel");
+}
+
+function addNewInput() {
+  onlineForm.value.inputs.push({
+    label: "",
+    dataType: "",
+    required: true,
+    multiple: false,
+  });
+}
+
+async function submit() {
+  // console.log("submit", onlineForm.value);
+  disable.value = true;
+  try {
+    if (prop.mode === "add") {
+      const payload = {
+        name: onlineForm.value.name,
+        attachment: onlineForm.value.attachment,
+        inputs: onlineForm.value.inputs,
+        status: "active",
+        org: orgId,
+        site: siteId,
+      };
+
+      await _add(payload);
+    }
+
+    if (prop.mode === "edit") {
+      const payload = {
+        name: onlineForm.value.name,
+        attachment: onlineForm.value.attachment,
+        inputs: onlineForm.value.inputs,
+      };
+
+      await _update(prop.onlineForm._id ?? "", payload);
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error.response?._data?.message || "Failed to create document";
+  } finally {
+    disable.value = false;
+  }
+}
+</script>