@iservice365/layer-common 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.5.0
+
+### Minor Changes
+
+- 1a1f3e0: Virtual patrol initial release
+
 ## 1.4.2
 
 ### Patch Changes

package/components/BillingMain.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="false"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination v-model="page" :length="pages" />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          style="max-height: calc(100vh - (180px))"
+        >
+          <template #item.permissions="{ value }">
+            <span class="text-caption font-weight-bold text-capitalize">
+              permissions
+            </span>
+            <v-chip>{{ value.length }}</v-chip>
+          </template>
+
+          <template #item.nature="{ item }">
+            <span class="text-capitalize">
+              {{ item.nature }}
+            </span>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Nature", value: "nature" },
+];
+</script>

package/components/Card/Toggle.vue

@@ -0,0 +1,25 @@
+<template>
+    <v-card flat border="md black">
+        <v-card-text class="d-flex justify-space-between align-center py-0">
+            <p>{{ label }}</p>
+            <v-switch v-model="toggle" :color="toggleColor" hide-details />
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    label: {
+        type: String,
+        default: "Enable"
+    },
+    toggleColor: {
+        type: String,
+        default: 'primary'
+    }
+})
+
+const toggle = defineModel({default: false})
+</script>
+
+<style scoped></style>

package/components/Dialog/UpdateMoreAction.vue

@@ -13,7 +13,7 @@
       </template>
     </v-toolbar>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0" :class="contentNoPadding ? 'pa-0' : ''">
       <slot name="content" />
     </v-card-text>
 
@@ -90,6 +90,10 @@ const prop = defineProps({
     type: String,
     default: "Details",
   },
+  contentNoPadding: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["close", "edit", "delete"]);

package/components/Editor.vue

@@ -0,0 +1,61 @@
+<template>
+    <ClientOnly>
+        <v-row no-gutters class="ckeditor-container w-100">
+            <ckeditor v-model="data" :editor="ClassicEditor" :config="config" />
+        </v-row>
+    </ClientOnly>
+</template>
+
+<script setup>
+import {
+    ClassicEditor,
+    Essentials,
+    Paragraph,
+    Bold,
+    Italic,
+    Heading,
+    List,
+    Link,
+    Alignment,
+    Font
+} from 'ckeditor5'
+import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+import 'ckeditor5/ckeditor5.css';
+
+import 'ckeditor5/ckeditor5.css'
+
+const data = defineModel({ required: true, default: "" })
+
+const config = computed(() => ({
+    licenseKey: 'GPL',
+    plugins: [Essentials, Paragraph, Bold, Italic, Heading, List, Alignment, Font],
+    toolbar: [
+        'undo', 'redo',
+        '|', 'bold', 'italic',
+        '|', 'fontSize', 'fontColor', 'fontBackgroundColor',
+        '|', 'bulletedList', 'numberedList',
+        '|', 'heading', '|', 'alignment:left', 'alignment:center', 'alignment:right', 'alignment:justify',
+    ]
+}))
+</script>
+
+<style scoped>
+.ckeditor-container {
+  width: 100%;
+  max-width: 100% !important;
+  overflow: hidden;
+}
+
+:deep(.ck.ck-editor) {
+  width: 100% !important;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.ck-editor__editable_inline) {
+  min-height: 200px;
+  width: 100% !important;
+  box-sizing: border-box;
+}
+</style>
+

package/components/ImageCarousel.vue

@@ -0,0 +1,98 @@
+<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="images.length > 1 ? 'hover' : false"
+        v-model="activeIndex">
+        <template v-for="x, index in images" :key="x._id">
+          <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-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}/${images.length}`
+            }}</span>
+
+    </v-row>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  activeImageId: {
+    type: String,
+    required: false,
+  },
+  isFavorite: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  images: {
+    type: Array as PropType<string[]>,
+    default: []
+  }
+});
+
+
+const { getFileUrl } = useFile()
+const overlay = defineModel({ required: true, default: false });
+const activeIndex = ref(0);
+const { currentUser} = useLocalAuth();
+
+const emit = defineEmits(['share', 'like'])
+
+watchEffect(() => {
+  if (props.activeImageId && props.images.length > 0) {
+    const index =
+      props.images?.findIndex((x) => x == props.activeImageId) || 0;
+    if (index !== -1) {
+      activeIndex.value = index;
+    } else activeIndex.value = 0;
+  } else {
+    return (activeIndex.value = 0);
+  }
+});
+
+
+const handleShare = () => {
+  overlay.value = false;
+  emit('share')
+}
+
+const handleLike = () => {
+  emit('like')
+}
+</script>
+
+<style scoped>
+.custom-shadow {
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+}
+</style>

package/components/Input/FileV2.vue

@@ -1,26 +1,52 @@
 <template>
-    <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
-        <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
-            :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
-            name="upload_images" class="text-caption w-100" clearable :multiple="multiple">
-            <template v-slot:item="{ props: itemProps, file }">
-                <v-file-upload-item v-bind="itemProps" lines="one" nav>
-                    <template v-slot:prepend>
-                        <v-avatar size="32" rounded></v-avatar>
-                    </template>
-
-                    <template v-slot:clear="{ props: clearProps }">
-                        <v-btn color="primary" @click="handleRemove(file)"></v-btn>
-                    </template>
-                </v-file-upload-item>
+  <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
+
+    <!-- VIEW MODE -->
+    <template v-if="viewMode">
+      <div class="w-100">
+        <v-file-upload-item v-for="({ file }, idx) in filesCollection" :key="fileKey(file)" :file="file" lines="one" nav
+          @click="handleClickItem(file)">
+          <template #prepend>
+            <v-avatar size="32" rounded></v-avatar>
+          </template>
+
+          <!-- delete hidden in view mode -->
+          <template #clear>
+            <!-- empty on purpose -->
+          </template>
+        </v-file-upload-item>
+      </div>
+    </template>
+
+    <!-- NORMAL MODE -->
+    <template v-else>
+      <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
+        :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
+        :name="`upload_images`" class="text-caption w-100" clearable :multiple="multiple">
+        <template #item="{ props: itemProps, file }">
+          <v-file-upload-item v-bind="itemProps" lines="one" nav @click="handleClickItem(file)">
+            <template #prepend>
+              <v-avatar size="32" rounded></v-avatar>
             </template>
-        </v-file-upload>
-        <v-row no-gutters class="w-100" v-if="errorMessage">
+
+            <!-- delete button NOT shown in view mode -->
+            <template #clear="{ props: clearProps }">
+              <v-btn v-if="!viewMode" color="primary" @click.stop="handleRemove(file)"></v-btn>
+            </template>
+          </v-file-upload-item>
+        </template>
+      </v-file-upload>
+    </template>
+
+    <v-row no-gutters class="w-100" v-if="errorMessage">
       <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
     </v-row>
-    </v-row>
+
+    <ImageCarousel v-model="showImageCarousel" :images="idsArray" :active-image-id="activeImageId" />
+  </v-row>
 </template>
 
+
 <script setup lang="ts">
 import { nextTick, ref, onMounted, watch } from 'vue'
 
@@ -44,11 +70,18 @@ const props = defineProps({
   accept: {
     type: String,
     default: "image/*"
+  },
+  viewMode: {
+    type: Boolean,
+    default: false
   }
 })
 
 const { addFile, deleteFile, getFileUrl, urlToFile } = useFile()
 
+const showImageCarousel = ref(false)
+const activeImageId = ref("")
+
 // The parent v-model binding
 const idsArray = defineModel<string[]>({ default: [] })
 
@@ -76,6 +109,21 @@ async function handleRemove(removedFile: File) {
 
 }
 
+function handleClickItem(file: File) {
+  const isImage =
+    file.type.startsWith('image/') ||
+    /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(file.name)
+
+  if (!isImage) return
+
+  const found = filesCollection.value.find((item) => fileKey(item.file) === fileKey(file))
+  if (!found) return
+
+  activeImageId.value = found.id
+  showImageCarousel.value = true
+}
+
+
 async function handleUpdateValue(value: File[]) {
   await nextTick()
   const max = props.maxLength
@@ -95,12 +143,12 @@ async function handleUpdateValue(value: File[]) {
     for (const file of addedFiles) {
       const res = await addFile(file) // should return { id, url }
       if (res?.id) {
-        filesCollection.value.push({ file, id: res.id })
+        filesCollection.value = [...filesCollection.value, { file, id: res.id }]
       }
     }
 
     uploadFiles.value = filesCollection.value.map((x) => x.file)
-    idsArray.value = filesCollection.value.map((x) => x.id)
+
   } catch (err) {
     console.error('Upload failed', err)
     errorMessage.value = 'Failed to upload some files.'
@@ -132,33 +180,30 @@ function resetErrorMessage() {
 
 
 onMounted(async () => {
-  if (idsArray.value.length > 0) {
-    processing.value = true
-    const loaded = await loadFilesFromIds(idsArray.value)
-    filesCollection.value = loaded
-    uploadFiles.value = loaded.map((x) => x.file)
-    processing.value = false
-  }
+  setTimeout(async () => {
+    if (idsArray.value.length > 0) {
+      const loadedFiles = await loadFilesFromIds(idsArray.value)
+      filesCollection.value = loadedFiles
+      uploadFiles.value = loadedFiles.map((x) => x.file)
+    }
+  }, 1000)
 })
 
+watch(filesCollection, () => {
+  idsArray.value = [...filesCollection.value.map(x => x.id)]
+}, { deep: true })
+
 
-watch(
-  filesCollection,
-  (newVal) => {
-    idsArray.value = newVal.map((x) => x.id)
-  },
-  { deep: true }
-)
 </script>
 
 
 <style scoped>
 * :deep(.v-file-upload-title) {
-    font-size: 1rem;
-    font-weight: 500;
+  font-size: 1rem;
+  font-weight: 500;
 }
 
 * :deep(.v-file-upload-items) {
-    min-width: 100%;
+  min-width: 100%;
 }
 </style>