@7365admin1/layer-common 1.8.0

package/components/ImageCarousel.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-dialog v-model="overlay" v-if="overlay" width="100%" height="100%" opacity="50">
+    <v-row align="center" justify="center" class="fill-height" style="position: relative;">
+      <v-carousel hide-delimiters width="100%" height="100%" :show-arrows="files.length > 1 ? 'hover' : false"
+        v-model="activeIndex">
+        <template v-for="x, index in files" :key="x || index">
+          <template v-if="fileTypes?.[x] === 'image'">
+            <v-carousel-item height="100%" width="100%" rounded="lg">
+              <v-row no-gutters class="w-100 h-100" align="center">
+                <v-img :lazy-src="getFileUrl(x)" :src="getFileUrl(x)" width="70%" height="70%"
+                  :alt="'Image Viewer Card -' + index"></v-img>
+              </v-row>
+              <template v-slot:placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
+                </div>
+              </template>
+            </v-carousel-item>
+          </template>
+          <template v-else-if="fileTypes?.[x] === 'video'">
+            <v-carousel-item>
+              <v-row no-gutters class="h-100 w-100" align="center" justify="center">
+                <video width="80%" height="80%" controls>
+                  <source :src="getFileUrl(x)" />
+                </video>
+              </v-row>
+              <template v-slot:placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
+                </div>
+              </template>
+            </v-carousel-item>
+          </template>
+          <template v-else>
+            <v-carousel-item>
+              <v-row no-gutters class="h-100 w-100" align="center" justify="center">
+                <v-icon size="100" color="white">mdi-file</v-icon>
+              </v-row>
+            </v-carousel-item>
+          </template>
+        </template>
+
+        <template v-slot:prev="{ props }">
+          <v-btn color="white" variant="outlined" class="text-white" icon="mdi-chevron-left"
+            @click="props.onClick"></v-btn>
+        </template>
+        <template v-slot:next="{ props }">
+          <v-btn color="white" class="text-white" variant="outlined" icon="mdi-chevron-right"
+            @click="props.onClick"></v-btn>
+        </template>
+      </v-carousel>
+      <div style="position: absolute; top: 2%; left: 0%; right: 0%; z-index: 2"
+        class="cursor-pointer text-white text-h6 custom-shadow d-flex justify-space-between" @click="overlay = false">
+        <v-row no-gutters style="position: relative">
+          <v-col cols="8" xs="6" sm="2" md="2" lg="2">
+            <v-btn prepend-icon="mdi-close" text="Close" rounded="lg" color="secondary" class="ml-2"
+              style="position: absolute;"></v-btn>
+          </v-col>
+
+        </v-row>
+
+      </div>
+      <span class="text-white text-16px d-flex w-100 mt-2 justify-center"
+        style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">{{ `${activeIndex +
+          1}/${files.length}`
+        }}</span>
+
+    </v-row>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  activeFileId: {
+    type: String,
+    required: false,
+  },
+  files: {
+    type: Array as PropType<string[]>,
+    default: []
+  }
+});
+
+
+const { getFileUrl, urlToFile } = useFile()
+const overlay = defineModel({ required: true, default: false });
+const activeIndex = ref(0);
+const fileTypes = ref<Record<string, "image" | "video" | "other">>({});
+
+
+const emit = defineEmits(['share', 'like'])
+
+watchEffect(() => {
+  if (props.activeFileId && props.files.length > 0) {
+    const index =
+      props.files?.findIndex((x) => x == props.activeFileId) || 0;
+    if (index !== -1) {
+      activeIndex.value = index;
+    } else activeIndex.value = 0;
+  } else {
+    return (activeIndex.value = 0);
+  }
+});
+
+async function resolveFileTypes() {
+  fileTypes.value = {}; // reset
+
+  for (const x of props.files) {
+    try {
+      const url = getFileUrl(x);
+      const file = await urlToFile(url, x);
+      const type = file?.type;
+     
+
+      if (type?.startsWith("video")) fileTypes.value[x] = "video";
+      else if (type?.startsWith("image")) fileTypes.value[x] = "image";
+      else fileTypes.value[x] = "other";
+
+    } catch (err) {
+      fileTypes.value[x] = "other";
+    }
+  }
+}
+
+watch(
+  () => props.files,
+  () => resolveFileTypes(),
+  { immediate: true }
+);
+
+
+</script>
+
+<style scoped>
+.custom-shadow {
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+}
+</style>

package/components/Input/Date.vue

@@ -0,0 +1,177 @@
+<template>
+  <v-input
+    :error="!!validationErrMsg"
+    :error-messages="validationErrMsg"
+    hide-details="auto"
+    :name="name + 'custom-input-date'"
+    :disabled="props.disabled"
+  >
+    <template #default>
+      <v-row>
+        <v-col cols="12" lg="6" md="6">
+          <v-select
+            v-model="month"
+            :items="props.months"
+            label="Month"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-month'"
+            hide-details
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="3" md="3">
+          <v-text-field
+            v-model.number="day"
+            type="number"
+            label="Day"
+            hide-details
+            placeholder="DD"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-day'"
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="3" md="3">
+          <v-text-field
+            v-model.number="year"
+            type="number"
+            label="Year"
+            hide-details
+            placeholder="YYYY"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-year'"
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const month = defineModel("month", { default: "" });
+const day = defineModel("day", { default: 0 });
+const year = defineModel("year", { default: 0 });
+
+const props = defineProps({
+  months: {
+    type: Array,
+    default: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+  },
+  name: {
+    type: String,
+    default: "input-date-combo",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isLeapYear = (year: number): boolean =>
+  (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+
+const monthMap: Record<string, number> = {
+  January: 1,
+  February: 2,
+  March: 3,
+  April: 4,
+  May: 5,
+  June: 6,
+  July: 7,
+  August: 8,
+  September: 9,
+  October: 10,
+  November: 11,
+  December: 12,
+};
+
+const validateBirthDate = (): string => {
+  const _month = monthMap[month.value];
+  const _day = day.value;
+  const _year = year.value;
+
+  const errorMessage = "Enter a valid date";
+
+  if (
+    !_month ||
+    !_day ||
+    !_year ||
+    _year < 1904 ||
+    _year > new Date().getFullYear()
+  ) {
+    return errorMessage;
+  }
+
+  const daysInMonth = [
+    31,
+    isLeapYear(_year) ? 29 : 28,
+    31,
+    30,
+    31,
+    30,
+    31,
+    31,
+    30,
+    31,
+    30,
+    31,
+  ];
+
+  if (_day < 1 || _day > daysInMonth[_month - 1]) {
+    return errorMessage;
+  }
+
+  if (!_month || !_day || !_year) {
+    return errorMessage;
+  }
+
+  return "";
+};
+
+const validationErrMsg = ref("");
+
+const date = computed(() => {
+  return {
+    day: day.value,
+    month: month.value,
+    year: year.value,
+  };
+});
+
+validationErrMsg.value = validateBirthDate();
+
+const disabled = computed(() => props.disabled);
+
+watch(disabled, (curr) => {
+  if (curr) {
+    validationErrMsg.value = validateBirthDate();
+  }
+});
+
+watch(
+  date,
+  () => {
+    validationErrMsg.value = validateBirthDate();
+  },
+  { deep: true }
+);
+</script>

package/components/Input/DateTimePicker.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="d-flex flex-column">
+        <v-text-field v-bind="$attrs" ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly" autocomplete="off"
+            :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
+            <template #append-inner>
+                <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+            </template>
+        </v-text-field>
+        <div class="w-100 d-flex align-end ga-3 hidden-input">
+            <input ref="dateInput" type="datetime-local" v-model="dateTime" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+const prop = defineProps({
+    rules: {
+        type: Array as PropType<Array<any>>,
+        default: () => []
+    },
+    placeholder: {
+        type: String,
+        default: 'MM/DD/YYYY, HH:MM AM/PM'
+    }
+})
+
+const { formatDateISO8601 } = useUtils()
+const dateTime = defineModel<string | null>({ default: null }) //2025-10-10T13:09 format 
+const dateTimeUTC = defineModel<string | null>('utc', { default: null }) // UTC format
+
+const dateTimeFormattedReadOnly = ref<string | null>(null)
+
+
+
+
+const dateInput = ref<HTMLInputElement | null>(null)
+const dateTimePickerRef = ref<HTMLInputElement | null>(null)
+
+const isInitialLoad = ref(true)
+
+function openDatePicker() {
+    setTimeout(() => {
+        dateInput.value?.showPicker?.()
+    }, 0)
+}
+
+function validate() {
+    (dateTimePickerRef.value as any)?.validate()
+}
+
+function convertToReadableFormat(dateStr: string): string {
+
+    if (!dateStr) return "";
+    const date = new Date(dateStr)
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    }
+    const formatted = date.toLocaleString('en-US', options)
+    return formatted
+}
+
+function handleInitialDate(){
+    const dateDefault = dateTime.value
+    const dateUTC = dateTimeUTC.value
+    if(dateDefault){
+        dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault)
+        const localDate = new Date(dateDefault)
+        dateTimeUTC.value = localDate.toISOString()
+    } else if (dateUTC){
+        dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC)
+        const localDate = new Date(dateUTC)
+        dateTime.value = formatDateISO8601(localDate)
+    } else {
+        dateTimeFormattedReadOnly.value = null
+    }
+}
+
+
+watch(dateTime, (dateVal) => {
+    if (isInitialLoad.value) return // ignore the first run
+    if (!dateVal) {
+        dateTimeFormattedReadOnly.value = null;
+        dateTimeUTC.value = null
+        return
+    }
+
+    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal)
+    const localDate = new Date(dateVal)
+    dateTimeUTC.value = localDate.toISOString()
+
+}, { immediate: false })
+
+  watch(dateTimeUTC, () => {
+        handleInitialDate()
+  }, { immediate: true})
+
+
+onMounted(async () => {
+    await nextTick()
+    isInitialLoad.value = false
+    // Wait until Vuetify renders its internal input
+    const nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector('input')
+    if (nativeInput) {
+        nativeInput.addEventListener('click', (e: MouseEvent) => {
+            e.stopPropagation()
+            openDatePicker()
+        })
+    }
+    
+})
+
+
+defineExpose({
+    validate
+})
+</script>
+
+<style scoped>
+.hidden-input {
+    opacity: 0;
+    height: 0;
+    width: 1px;
+}
+</style>

package/components/Input/File.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <v-row class="mb-4" align="center" no-gutters>
+      <v-col
+        cols="10"
+        class="pr-2"
+        v-if="
+          props.createdFrom === 'feedback' && props.attachments.length > 0
+            ? false
+            : true
+        "
+      >
+        <div
+          class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
+          @dragover.prevent
+          @drop="handleDrop"
+          style="position: relative; z-index: 1"
+        >
+          <v-file-input
+            ref="dropInput"
+            v-model="files"
+            multiple
+            hide-details
+            :max-files="maxFiles"
+            style="
+              opacity: 0;
+              position: absolute;
+              inset: 0;
+              z-index: 2;
+              cursor: pointer;
+            "
+            @change="onFileChange"
+          />
+          <div
+            class="d-flex align-center"
+            style="z-index: 1; pointer-events: none"
+          >
+            <v-icon size="28" class="mr-2" color="primary"
+              >mdi-cloud-upload-outline</v-icon
+            >
+            <span class="text-body-1 font-weight-medium"
+              >Drag and drop files here</span
+            >
+          </div>
+        </div>
+      </v-col>
+
+      <v-col
+        cols="2"
+        class="d-flex justify-center"
+        v-if="
+          props.createdFrom === 'feedback' && props.attachments.length > 0
+            ? false
+            : true
+        "
+      >
+        <v-btn
+          color="primary-button"
+          min-width="55"
+          width="55"
+          height="55"
+          elevation="0"
+          @click="selectAttachment"
+        >
+          <v-icon size="20">mdi-camera-outline</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-sheet v-if="attachments.length > 0" elevation="0" class="py-3" rounded>
+      <v-row no-gutters>
+        <v-col
+          v-for="(file, index) in attachments"
+          :key="index"
+          cols="12"
+          class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
+        >
+          <div class="mr-3">
+            <!-- <v-img
+              v-if="!localErroredImages.includes(file)"
+              :src="file"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
+              @error="onImageError(file)"
+            />
+            <v-img
+              v-else
+              :src="getThumbnail(file)"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
+            /> -->
+            <v-img
+              :src="getThumbnail(file)"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
+            />
+          </div>
+
+          <div class="flex-grow-1 text-truncate">
+            {{ getDisplayName(file) }}
+          </div>
+
+          <v-icon
+            size="small"
+            @click.stop="$emit('delete', file)"
+            v-if="
+              props.createdFrom === 'feedback' && props.attachments.length > 0
+                ? false
+                : true
+            "
+          >
+            mdi-trash-can-outline
+          </v-icon>
+        </v-col>
+      </v-row>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  attachments: string[];
+  erroredImages?: string[];
+  maxFiles?: number;
+  createdFrom?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "add", file: File): void;
+  (e: "delete", url: string): void;
+  (e: "errored", url: string): void;
+}>();
+
+const dropInput = ref<any>(null);
+const files = ref<File[]>([]);
+const localErroredImages = ref<string[]>(props.erroredImages || []);
+// Store file names for display
+const fileNamesMap = ref<Record<string, string>>({});
+
+watch(
+  () => props.erroredImages,
+  (val) => {
+    if (val) {
+      localErroredImages.value = val;
+    }
+  }
+);
+
+function handleDrop(event: DragEvent) {
+  const droppedFiles = event.dataTransfer?.files;
+  if (droppedFiles?.length) {
+    files.value = Array.from(droppedFiles);
+    onFileChange();
+  }
+}
+
+function selectAttachment() {
+  const input = dropInput.value?.$el?.querySelector(
+    "input[type='file']"
+  ) as HTMLInputElement | null;
+  input?.click();
+}
+
+function onFileChange() {
+  if (files.value.length) {
+    console.log(
+      "onFileChange triggered with files:",
+      files.value.map((f) => f.name)
+    );
+
+    const maxFiles = props.maxFiles || 5;
+    if (files.value.length > maxFiles) {
+      console.warn(`Too many files selected. Maximum allowed: ${maxFiles}`);
+      files.value = [];
+      return;
+    }
+
+    files.value.forEach((file) => {
+      console.log(`Emitting 'add' event for file: ${file.name}`);
+      // For each file, we'll also need to store its original name
+      // This will be associated with the file URL in the parent component
+      emit("add", file);
+    });
+
+    files.value = [];
+  }
+}
+
+function onImageError(file: string) {
+  console.log(`Image error for file: ${file}`);
+  emit("errored", file);
+}
+
+function getThumbnail(fileUrl: string): string {
+  // if (fileUrl.endsWith(".pdf")) return "mdi-file-pdf-outline";
+  // if (fileUrl.match(/\.(doc|docx)$/i))
+  //   return "/images/file-thumbnails/word.png";
+  // if (fileUrl.match(/\.(xls|xlsx)$/i))
+  //   return "/images/file-thumbnails/excel.png";
+  // return "/images/file-thumbnails/file.png";
+  return `/api/public/${fileUrl}`;
+}
+
+// Modified to try to display the friendly name
+function getFileName(fileUrl: string): string {
+  try {
+    const url = new URL(fileUrl);
+    return decodeURIComponent(url.pathname.split("/").pop() || "");
+  } catch (e) {
+    return fileUrl.split("/").pop() || "";
+  }
+}
+
+// This will use our stored file names when available
+function getDisplayName(fileUrl: string): string {
+  // If we have a friendly name stored, use it
+  if (fileNamesMap.value[fileUrl]) {
+    return fileNamesMap.value[fileUrl];
+  }
+  // Otherwise fall back to the ID/URL-based name
+  return getFileName(fileUrl);
+}
+
+// Method to update file names map - will be called from parent
+defineExpose({
+  updateFileName: (url: string, name: string) => {
+    fileNamesMap.value[url] = name;
+  },
+});
+</script>