@iservice365/layer-common 1.1.0 → 1.3.0

package/components/Input/InputPhoneNumberV2.vue

@@ -0,0 +1,114 @@
+<template>
+    <v-row no-gutters class="mb-5">
+        <v-col cols="12" class="d-flex ga-2">
+            <v-select v-model="selectedCode" :variant="variant" :items="countries" item-title="code" item-value="code"
+                hide-details class="px-0" :density="density" style="max-width: 95px" :rules="[...props.rules]"
+                @update:model-value="handleUpdateCountry">
+                <template v-slot:item="{ props: itemProps, item }">
+                    <v-list-item v-bind="itemProps" :title="item.raw.name" :subtitle="item.raw.dial_code" width="300" />
+                </template>
+            </v-select>
+            <v-mask-input v-model="phone" :mask="currentMask" :rules="[...props.rules, validatePhone]"
+                :variant="variant" hint="Enter a valid phone number" hide-details persistent-hint return-masked-value
+                :density="density" :placeholder="placeholder || currentMask"></v-mask-input>
+        </v-col>
+        <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">{{ errorMessage }}</span>
+    </v-row>
+
+</template>
+
+<script setup lang="ts">
+import { ref, computed, type PropType } from 'vue'
+import type { ValidationRule } from 'vuetify/lib/types.mjs'
+import phoneMasks from '~/utils/phoneMasks'
+
+const props = defineProps({
+    rules: {
+        type: Array as PropType<ValidationRule[]>,
+        default: []
+    },
+    variant: {
+        type: String as PropType<any>,
+        default: "outlined"
+    },
+    density: {
+        type: String as PropType<Density>,
+        default: "default"
+    },
+    placeholder: {
+        type: String,
+    },
+    hideDetails: {
+        type: Boolean,
+        default: false
+    }
+})
+
+type Density = 'default' | 'comfortable' | 'compact';
+
+type TPhoneMask =
+    {
+        name: string
+        flag: string
+        code: string;
+        dial_code: string;
+        regex: string;
+    }
+
+const phone = defineModel({ default: '' })
+const selectedCode = ref('SG')
+const countries = phoneMasks
+const errorMessage = ref('')
+
+const currentMask = computed(() => {
+    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
+    if (!country) return '############'
+    return generateMaskFromRegex(country.regex)
+})
+
+
+
+const validatePhone = (value: string): boolean | string => {
+    if (!value) {
+        errorMessage.value = ''
+        return true;
+    }
+    const country = phoneMasks.find((c: any) => c.code === selectedCode.value)
+    if (!country) {
+        errorMessage.value = ''
+        return true
+    }
+
+    const regex = new RegExp(country.regex)
+    const isValid = regex.test(value)
+
+    errorMessage.value = isValid ? '' : `Invalid ${country.name} phone number`
+    return isValid
+}
+
+
+
+
+function generateMaskFromRegex(regex: string): string {
+
+    let pattern = regex.replace(/^\^|\$$/g, '')
+    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)))
+    pattern = pattern.replace(/\\d/g, '#')
+
+    pattern = pattern.replace(/\\/g, '')
+
+    pattern = pattern.replace(/\s\?/g, ' ')
+    pattern = pattern.replace(/\s/g, ' ')
+
+    pattern = pattern.replace(/\(\?:/g, '(')
+
+    return pattern.trim()
+}
+
+function handleUpdateCountry() {
+    phone.value = ''
+}
+
+
+
+</script>

package/components/Input/NRICNumber.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-text-field
+    v-model.trim="model"
+    :rules="rules"
+    :maxlength="maxlength"
+    :placeholder="placeholder"
+    :counter="maxlength"
+    @input="onInput"
+    outlined
+    clearable
+  />
+</template>
+
+<script setup>
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  maxlength: {
+    type: [Number, String],
+    default: false
+  }
+})
+
+const model = defineModel({required: true, default: ""})
+
+function onInput(event) {
+  const value = typeof event === 'string' ? event : event?.target?.value || ''
+
+  let formatted = value.replace(/[^A-Za-z0-9]/g, '')
+  formatted = formatted.toUpperCase()
+
+  model.value = formatted
+}
+</script>

package/components/Input/PhoneNumber.vue

@@ -14,6 +14,7 @@
         z-index="100000000"
         :menu-props="{
           maxHeight: 300,
+          zIndex: 3000
         }"
         no-data-text="No countries available"
       >

package/components/Input/VehicleNumber.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-text-field
+    v-model="model"
+    :rules="rules"
+    :maxlength="maxlength"
+    :placeholder="placeholder"
+    :counter="maxlength"
+    @input="onInput"
+    outlined
+    :disabled="disabled"
+    :readonly="readonly"
+    clearable
+  />
+</template>
+
+<script setup>
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Vehicle Number'
+  },
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  maxlength: {
+    type: [Number, String],
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+  },
+  readonly: {
+    type: Boolean,
+  }
+})
+
+const model = defineModel({required: true, default: ""})
+
+function onInput(event) {
+  const value = typeof event === 'string' ? event : event?.target?.value || ''
+
+  let formatted = value.replace(/[^A-Za-z0-9]/g, '')
+  formatted = formatted.toUpperCase()
+
+  model.value = formatted
+}
+</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>