@7365admin1/layer-common 1.8.0

package/components/TableListSecondary.vue

@@ -0,0 +1,164 @@
+<template>
+  <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
+      <template #prepend>
+        <slot name="title">Title</slot>
+      </template>
+
+      <template #append>
+        <v-row no-gutters justify="end" align="center">
+          <slot name="action-button"></slot>
+        </v-row>
+      </template>
+
+      <template v-if="$slots.extension" v-slot:extension>
+        <slot name="extension"></slot>
+      </template>
+    </v-toolbar>
+
+    <v-data-table
+      v-model="selected"
+      :headers="props.headers"
+      :items="props.items"
+      item-value="_id"
+      items-per-page="20"
+      fixed-header
+      hide-default-footer
+      selec
+      :loading="props.loading"
+      @click:row="handleRowClick"
+      :style="`max-height:${props.height}`"
+      :class="{ 'clickable-rows': props.clickableRows }"
+    >
+      <template v-if="$slots.item" v-slot:item>
+        <slot name="item" :items="props.items"></slot>
+      </template>
+
+      <template v-slot:item="{ item }">
+        <tr @click="handleRowClick(item)">
+          <td v-for="col in props.headers" :key="col.value">
+            <slot :name="col.value" :item="item">
+              {{ item[col.value] }}
+            </slot>
+          </td>
+        </tr>
+      </template>
+    </v-data-table>
+    <v-toolbar density="compact" class="px-3 border-t-sm" color="transparent">
+      <template #append>
+        <v-row no-gutters justify="end" align="center">
+          <span class="mr-2 text-caption text-fontgray">
+            {{ props.pageRange }}
+          </span>
+          <div class="arrow-navigation">
+            <v-btn
+              icon="mdi-chevron-left"
+              variant="text"
+              density="comfortable"
+              :disabled="page <= 1"
+              @click="decrement"
+            />
+            <v-btn
+              icon="mdi-chevron-right"
+              variant="text"
+              density="comfortable"
+              :disabled="page >= props.length"
+              @click="increment"
+            />
+          </div>
+        </v-row>
+      </template>
+
+      <template v-if="$slots.extension" v-slot:extension>
+        <slot name="extension"></slot>
+      </template>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel({
+  type: Array as PropType<Array<string>>,
+  default: () => [],
+});
+const page = defineModel("page", { type: Number, default: 0 });
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    required: true,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+    default: () => [],
+  },
+  pages: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    required: true,
+    default: "-- - -- of --",
+  },
+  length: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
+  clickableRows: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["refresh", "update:pagination", "row-click"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+
+function handleRowClick(item: any) {
+  if (props.clickableRows) {
+    emit("row-click", item);
+  }
+}
+
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = props.items.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>
+
+<style scoped>
+.clickable-rows tbody tr {
+  cursor: pointer;
+}
+
+.clickable-rows tbody tr:hover {
+  background-color: #f5f5f5;
+}
+</style>

package/components/TableMain.vue

@@ -0,0 +1,142 @@
+<template>
+  <v-row no-gutters>
+    <!-- Top Actions -->
+    <v-col cols="12" class="mb-2" v-if="(canCreate || $slots.actions)">
+      <v-row no-gutters>
+        <slot name="actions">
+          <v-col cols="12">
+            <v-row no-gutters justify="space-between">
+              <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
+                @click="emits('create')">
+                {{ createLabel }}
+              </v-btn>
+              <v-text-field v-if="props.canSearch" v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+                append-inner-icon="mdi-magnify" hide-details />
+            </v-row>
+          </v-col>
+        </slot>
+
+      </v-row>
+    </v-col>
+
+    <!-- Table Card -->
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
+        <!-- Toolbar -->
+        <v-toolbar density="compact" color="grey-lighten-4" :extension-height="extensionHeight">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="emits('refresh')">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+            <slot name="prepend-additional" />
+          </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="internalPage" :length="pages"
+                @update:value="emits('update:page', internalPage)" />
+            </v-row>
+          </template>
+
+          <template v-if="$slots.extension" #extension>
+            <slot name="extension" />
+          </template>
+        </v-toolbar>
+
+
+        <!-- Data Table -->
+        <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
+          fixed-header hide-default-footer :hide-default-header="!showHeader"
+          @click:row="(_: any, data: any) => emits('row-click', data)"
+          :style="`max-height: calc(100vh - (${offset}px))`">
+          <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps" />
+          </template>
+        </v-data-table>
+        <slot name="footer" />
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  canCreate: {
+    type: Boolean,
+    default: false,
+  },
+  canSearch: {
+    type: Boolean,
+    default: false,
+  },
+  createLabel: {
+    type: String,
+    default: "Add",
+  },
+  itemValue: {
+    type: String,
+    default: "_id",
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20,
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pages: {
+    type: Number,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    default: "-- - -- of --",
+  },
+  showHeader: {
+    type: Boolean,
+    default: false
+  },
+  extensionHeight: {
+    type: Number,
+    default: 50
+  },
+  offset: {
+    type: Number,
+    default: 200
+  }
+});
+
+const emits = defineEmits(["create", "refresh", "update:page", "row-click"]);
+
+const searchInput = defineModel('search', { default: "" })
+
+const internalPage = ref(props.page);
+watch(
+  () => props.page,
+  (val) => {
+    internalPage.value = val;
+  }
+);
+</script>
+
+<style scoped>
+.v-data-table :deep(thead th) {
+  font-weight: bold !important;
+}
+</style>

package/components/TableWithButton.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-card flat border="sm black" :loading="loading" class="px-0" :ripple="false">
+    <v-toolbar class="px-5">
+      <template #prepend>
+        <span class="text-subtitle-1 font-weight-black">{{ tableTitle }}</span>
+      </template>
+      <template #append>
+        <v-btn color="primary" variant="flat" size="large" density="comfortable" :text="buttonLabel"
+          class="text-capitalize" />
+      </template>
+    </v-toolbar>
+    <v-card-text class="pa-0 bg-red">
+      <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
+        fixed-header hide-default-footer hide-default-header @click:row="$emit('row-click', $event)"
+        style="max-height: calc(100vh - (200px))">
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+          <slot :name="slotName" v-bind="slotProps" />
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel({
+  type: Array as PropType<Array<string>>,
+  default: () => [],
+});
+const page = defineModel("page", { type: Number, default: 0 });
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, string | number>>>,
+    required: true,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+    default: () => [],
+  },
+
+  itemValue: {
+    type: String,
+    default: "_id",
+  },
+    itemsPerPage: {
+    type: Number,
+    default: 20,
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  tableTitle: {
+    type: String,
+    default: "",
+    required: false
+  },
+  buttonLabel: {
+    type: String,
+    default: "Add",
+    required: false
+  }
+});
+
+const emit = defineEmits(["refresh", "update:pagination", "row-click"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+
+function tableRowClickHandler(_: any, row: any) {
+  const item = props.items[row.index];
+  emit("row-click", item);
+}
+
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = props.items.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>

package/components/VehicleUpdateMoreAction.vue

@@ -0,0 +1,84 @@
+<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">
+      <slot name="content" />
+    </v-card-text>
+
+    <v-toolbar class="pa-0" density="compact">
+      <v-row no-gutters>
+        <v-col :cols="canDelete || canUpdate ? 6 : 12" 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-if="canDelete || canUpdate">
+          <v-menu>
+            <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",
+  },
+});
+
+const emit = defineEmits(["close", "edit", "delete"]);
+const { canUpdate, editButtonLabel, deleteButtonLabel, title } = prop;
+</script>
+
+<style scoped></style>

package/components/VideoPlayer.vue

@@ -0,0 +1,125 @@
+<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] === '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>