@iservice365/layer-common 0.1.0 → 0.2.0

package/.playground/app.vue

@@ -2,10 +2,10 @@
   <v-app>
     <LayoutHeader />
 
-    <LayoutNavigationDrawer :navigation-items="navigationItems"/>
+    <LayoutNavigationDrawer :navigation-items="navigationItems" />
 
     <v-main>
-      <slot />
+      <NuxtLayout> <NuxtPage /> </NuxtLayout>
     </v-main>
   </v-app>
 </template>
@@ -28,6 +28,11 @@ const navigationItems = computed(() => {
       title: "Draft",
       route: { name: "index" },
       icon: "mdi-account-circle",
+    },
+    {
+      title: "Feedback",
+      route: { name: "feedback" },
+      icon: "mdi-account-circle",
     }
   );
 

package/.playground/pages/feedback.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-row class="no-gutters" align="center" justify="center">
+    <v-col cols="12" md="10" lg="10">
+      <FeedbackListView @click:create="showCreateDialog = true" />
+    </v-col>
+
+    <v-dialog
+      v-model="showCreateDialog"
+      fullscreen
+      transition="dialog-right-transition"
+      persistent
+    >
+      <v-card
+        class="ml-auto"
+        style="
+          height: 100vh;
+          width: 400px;
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+        "
+      >
+        <FeedbackFormCreate @close="showCreateDialog = false" />
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+const showCreateDialog = ref(false);
+</script>

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 0.2.0
+
+### Minor Changes
+
+- 7df0f0f: Add iconify
+
 ## 0.1.0
 
 ### Minor Changes

package/components/Chat/Bubbles.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-card class="mb-2 pa-4 rounded-lg" width="400" elevation="2">
+    <v-row no-gutters align="center">
+      <v-col cols="auto" class="mr-3">
+        <v-avatar color="surface-variant" size="35">
+          <v-img v-if="currentUser?.profile" width="15" height="15" />
+          <span v-else class="text-h5">{{ getNameInitials(senderName) }}</span>
+        </v-avatar>
+      </v-col>
+
+      <v-col class="d-flex flex-column">
+        <span class="text-body-2 font-weight-medium">{{ senderName }}</span>
+        <span class="text-caption text-grey">{{ role }}</span>
+      </v-col>
+    </v-row>
+
+    <v-row no-gutters class="mt-1">
+      <v-col>
+        <span class="py-2">{{ message }}</span>
+
+        <v-row no-gutters justify="space-between" align="center" class="mt-1">
+          <v-col cols="auto">
+            <span class="text-caption">{{ timestamp }}</span>
+          </v-col>
+          <v-col
+            v-if="isCurrentUser"
+            cols="auto"
+            class="d-flex align-center bg-grey-200"
+          >
+            <v-icon size="16" class="mr-1 text--secondary"
+              >mdi-eye-outline</v-icon
+            >
+            <span class="text-caption text--secondary">{{ seenLabel }}</span>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  isCurrentUser: boolean;
+  message: string;
+  timestamp: string;
+  seenLabel?: string;
+  senderName: string;
+  role?: string;
+}>();
+
+const { currentUser } = useLocalAuth();
+const { getNameInitials } = useUtils();
+</script>

package/components/Chat/Information.vue

@@ -0,0 +1,187 @@
+<template>
+  <v-sheet
+    elevation="1"
+    rounded="0"
+    class="fill-height d-flex flex-column"
+    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+  >
+    <v-row class="pa-4">
+      <v-sheet
+        class="overflow-y-auto flex-grow-1"
+        :style="{ height: 'calc(100vh - 180px)', overflowX: 'hidden' }"
+      >
+        <v-col
+          cols="12"
+          class="mb-2"
+          style="position: sticky; top: 0; background-color: white; z-index: 1"
+        >
+          <h3 class="text-h6">Information</h3>
+        </v-col>
+
+        <v-col cols="12" class="text-center mb-3" v-if="item">
+          <v-avatar
+            size="48"
+            class="mb-1"
+            v-if="!item.attachments || !item.attachments.length"
+          >
+            <v-img v-if="currentUser?.profile" width="15" height="15" />
+            <span v-else class="text-h5">{{
+              getNameInitials(senderName)
+            }}</span>
+          </v-avatar>
+
+          <v-img
+            v-else-if="item.attachments.length === 1"
+            :src="item.attachments[0]"
+            height="200"
+            cover
+            class="rounded mb-2"
+          />
+
+          <v-carousel
+            v-else
+            hide-delimiter-background
+            height="200"
+            class="rounded mb-2"
+            show-arrows
+            cycle
+          >
+            <v-carousel-item
+              v-for="(attachment, index) in item.attachments"
+              :key="index"
+            >
+              <v-img :src="attachment" cover class="w-100 h-100" />
+            </v-carousel-item>
+          </v-carousel>
+        </v-col>
+
+        <v-col cols="12" v-if="item">
+          <v-row dense class="my-1">
+            <v-col cols="6" class="py-1"><strong>Category:</strong></v-col>
+            <v-col cols="6" class="py-1 text-right text-capitalize">{{ item.category }}</v-col>
+          </v-row>
+
+          <v-divider />
+
+          <v-row dense class="my-1">
+            <v-col cols="6" class="py-1"><strong>Location:</strong></v-col>
+            <v-col cols="6" class="py-1 text-right">{{ item.location }}</v-col>
+          </v-row>
+          <v-divider />
+
+          <v-row dense class="my-1">
+            <v-col cols="12" class="py-1"
+              ><strong>Description Feedback:</strong></v-col
+            >
+            <v-col cols="12" class="py-1">
+              {{ item.description }}
+            </v-col>
+          </v-row>
+          <v-divider />
+
+          <v-row dense class="my-1">
+            <v-col cols="12" class="py-1"
+              ><strong>Description Work Order:</strong></v-col
+            >
+            <v-col cols="12" class="py-1">
+              {{
+                item.workOrderDescription ||
+                "No work order description available"
+              }}
+            </v-col>
+          </v-row>
+          <v-divider />
+
+          <v-row dense class="my-1">
+            <v-col cols="6" class="py-1"><strong>Workorder:</strong></v-col>
+            <v-col cols="6" class="py-1 text-right">{{ item.workOrder }}</v-col>
+          </v-row>
+
+          <v-divider />
+
+          <v-row dense class="my-1">
+            <v-col cols="6" class="py-1"><strong>Status:</strong></v-col>
+            <v-col cols="6" class="py-1 text-right">
+              <v-chip
+                :color="getColorStatus(item.status)"
+                size="x-small"
+                text-color="white"
+              >
+                {{ item.status }}
+              </v-chip>
+            </v-col>
+          </v-row>
+
+          <v-divider />
+
+          <v-row dense class="my-1">
+            <v-col cols="6" class="py-1"><strong>Created At:</strong></v-col>
+            <v-col cols="6" class="py-1 text-right">{{
+              formatDate(item.createdAt)
+            }}</v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12">
+          <v-btn
+            block
+            color="primary"
+            variant="flat"
+            class="mb-2 text-capitalize"
+            @click="$emit('edit')"
+          >
+            Edit
+          </v-btn>
+        </v-col>
+      </v-sheet>
+    </v-row>
+
+    <v-sheet class="px-4 py-2">
+      <v-btn
+        v-if="item?.status !== 'Completed'"
+        block
+        color="primary-button"
+        density="default"
+        class="mb-2 text-capitalize"
+        @click="$emit('mark-complete-request')"
+      >
+        Mark as Complete
+      </v-btn>
+      <v-btn
+        block
+        variant="flat"
+        color="red"
+        density="default"
+        class="text-white text-capitalize"
+        @click="$emit('delete')"
+      >
+        Delete
+      </v-btn>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+const { getColorStatus, formatDate } = useUtils();
+
+defineProps({
+  item: {
+    type: Object,
+    default: () => ({}),
+  },
+  senderName: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits([
+  "update:provider",
+  "mark-complete-request",
+  "delete",
+  "edit",
+]);
+
+const { currentUser } = useLocalAuth();
+const { getNameInitials } = useUtils();
+</script>

package/components/Chat/ListCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-card class="mb-2 pa-2 rounded-lg border-sm" elevation="0">
+    <v-row no-gutters align="center">
+      <v-col cols="12" sm="4" class="d-flex justify-center align-center">
+        <v-img
+          :src="image"
+          alt="Photo"
+          max-height="100"
+          width="100%"
+          cover
+          class="rounded-lg"
+        />
+      </v-col>
+
+      <v-col cols="12" sm="8" class="py-2 pe-1">
+        <v-row dense>
+          <v-col cols="12" class="d-flex align-center flex-wrap">
+            <span class="text-caption font-weight-medium me-1">Created by</span>
+
+            <v-avatar color="surface-variant" size="20" class="me-1">
+              <v-img
+                v-if="userProfile"
+                :src="userProfile"
+                width="20"
+                height="20"
+              />
+              <span v-else class="text-overline">
+                {{ getNameInitials }}
+              </span>
+            </v-avatar>
+
+            <span class="text-caption">{{ createdByName || "Unknown" }}</span>
+          </v-col>
+
+          <v-col cols="12" class="text-caption">Subject: {{ subject }}</v-col>
+
+          <v-col cols="12" class="text-caption">
+            Status: <span class="text-orange">{{ status }}</span>
+          </v-col>
+
+          <v-col cols="12" class="text-caption">
+            Date Created: {{ createdAt }}
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const { getNameInitials } = useUtils();
+
+defineProps({
+  image: String,
+  subject: String,
+  status: String,
+  createdAt: String,
+  createdByName: String,
+  userProfile: String,
+  getNameInitials: Function,
+});
+</script>

package/components/Chat/Message.vue

@@ -0,0 +1,149 @@
+<template>
+  <v-sheet
+    elevation="1"
+    rounded="0"
+    class="fill-height d-flex flex-column"
+    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+  >
+    <div style="border-bottom: 1px solid #e0e0e0" class="px-4 pt-4 pb-2 mb-2">
+      <h3 class="text-h6">Chat</h3>
+    </div>
+
+    <v-sheet
+      class="overflow-y-auto flex-grow-1 pa-3"
+      :style="{ height: 'calc(100vh - 300px)', overflowX: 'hidden' }"
+    >
+      <v-row
+        v-for="(msg, i) in messages"
+        :key="i"
+        no-gutters
+        :justify="msg.isCurrentUser ? 'end' : 'start'"
+        class="mb-2"
+      >
+        <v-col cols="auto">
+          <ChatBubbles
+            :isCurrentUser="msg.isCurrentUser"
+            :message="msg.message"
+            :timestamp="msg.timestamp"
+            :seenLabel="msg.seenLabel"
+            :senderName="msg.senderName"
+            :role="msg.role"
+          />
+        </v-col>
+      </v-row>
+    </v-sheet>
+
+    <v-card class="mx-4 mb-4 mt-2 pa-3 rounded-lg" elevation="2">
+      <v-row no-gutters align="end">
+        <v-col cols="10">
+          <v-textarea
+            label="Message"
+            auto-grow
+            hide-details
+            rows="1"
+            variant="outlined"
+          />
+        </v-col>
+        <v-col cols="2" class="pl-2">
+          <v-btn color="primary-button" block class="pa-4 py-6 text-capitalize"
+            >Send</v-btn
+          >
+        </v-col>
+      </v-row>
+
+      <v-divider class="my-2" />
+
+      <v-row justify="start" no-gutters align="center">
+        <v-col cols="auto">
+          <v-icon size="20" class="mr-3">mdi-paperclip</v-icon>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-icon size="20" class="mr-3">mdi-emoticon-happy-outline</v-icon>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-menu location="top" offset="10">
+            <template #activator="{ props }">
+              <v-btn icon v-bind="props" density="compact" variant="text">
+                <v-icon size="20" color="gray">mdi-message-outline</v-icon>
+              </v-btn>
+            </template>
+
+            <v-card min-width="350" class="rounded-lg">
+              <v-card-title class="text-subtitle-1 font-weight-medium pb-1"
+                >Quick Chat</v-card-title
+              >
+              <v-divider class="mb-1" />
+
+              <v-list density="compact">
+                <v-list-item
+                  v-for="(option, index) in quickChatOptions"
+                  :key="index"
+                  @click="selectQuickChat(option)"
+                >
+                  <v-list-item-title>{{ option }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-card>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+const messages = [
+  {
+    isCurrentUser: true,
+    message: "Hello we would like to transfer this task...",
+    timestamp: "06/28/2024 08:40",
+    seenLabel: "Seen",
+    senderName: "You",
+    role: "Site Personnel",
+  },
+  {
+    isCurrentUser: false,
+    message: "Sure. Let me take care of that.",
+    timestamp: "06/28/2024 08:42",
+    senderName: "Tan Wei",
+    role: "Manager",
+  },
+  {
+    isCurrentUser: true,
+    message: "Thanks!",
+    timestamp: "06/28/2024 08:43",
+    seenLabel: "Seen",
+    senderName: "You",
+    role: "Site Personnel",
+  },
+  {
+    isCurrentUser: false,
+    message: "No worries!",
+    timestamp: "06/28/2024 08:44",
+    senderName: "Tan Wei",
+    role: "Manager",
+  },
+  {
+    isCurrentUser: true,
+    message: "Let me know if you need anything else.",
+    timestamp: "06/28/2024 08:45",
+    seenLabel: "Seen",
+    senderName: "You",
+    role: "Site Personnel",
+  },
+];
+
+const quickChatOptions = [
+  "This is all noted, thank you!",
+  "Ok, we are working on it.",
+  "Yes, we will do it as soon as possible.",
+  "Sorry, we cannot make it this time.",
+  "We are here to help.",
+];
+
+const selectQuickChat = (msg: string) => {
+  console.log("Quick Chat Selected:", msg);
+};
+</script>

package/components/Chat/Navigation.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-sheet
+    elevation="1"
+    rounded="0"
+    class="pa-4 fill-height"
+    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+  >
+    <h3 class="text-h6 mb-4">{{ title }}</h3>
+
+    <v-text-field
+      v-model="search"
+      @input="_search"
+      label="Search"
+      prepend-inner-icon="mdi-magnify"
+      density="compact"
+      hide-details
+      variant="outlined"
+      class="mb-4"
+    />
+
+    <v-select
+      label="Filter by Status"
+      :items="['All', 'In Progress', 'To Do', 'Done']"
+      v-model="selectedStatus"
+      density="compact"
+      hide-details
+      variant="outlined"
+      class="mb-4"
+    />
+
+    <v-row dense class="mb-4" align="center">
+      <v-col cols="5">
+        <v-menu
+          v-model="startMenu"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          max-width="280px"
+          min-width="auto"
+        >
+          <template #activator="{ props }">
+            <v-text-field
+              v-bind="props"
+              v-model="startDate"
+              label="Start Date"
+              density="compact"
+              variant="outlined"
+              readonly
+              hide-details
+              prepend-inner-icon="mdi-calendar"
+            />
+          </template>
+
+          <v-date-picker
+            v-model="startDate"
+            @update:model-value="startMenu = false"
+            show-adjacent-months
+            hide-header
+            class="d-flex flex-column pa-2"
+            style="font-size: 0.85rem; max-height: 300px"
+          />
+        </v-menu>
+      </v-col>
+
+      <v-col cols="2" class="d-flex align-center justify-center">
+        <span class="text-subtitle-2">to</span>
+      </v-col>
+
+      <v-col cols="5">
+        <v-menu
+          v-model="endMenu"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          max-width="280px"
+          min-width="auto"
+        >
+          <template #activator="{ props }">
+            <v-text-field
+              v-bind="props"
+              v-model="endDate"
+              label="End Date"
+              density="compact"
+              variant="outlined"
+              readonly
+              hide-details
+              prepend-inner-icon="mdi-calendar"
+            />
+          </template>
+
+          <v-date-picker
+            v-model="endDate"
+            @update:model-value="endMenu = false"
+            show-adjacent-months
+            hide-header
+            class="d-flex flex-column pa-2"
+            style="font-size: 0.85rem; max-height: 300px"
+          />
+        </v-menu>
+      </v-col>
+    </v-row>
+
+    <v-sheet
+      class="overflow-y-auto flex-grow-1 pa-3"
+      :style="{ height: 'calc(100vh - 320px)', overflowX: 'hidden' }"
+    >
+      <v-row dense>
+        <v-col v-for="(item, index) in items" :key="item._id" cols="12">
+          <div class="cursor-pointer" @click="$emit('select', item._id)">
+            <ChatListCard
+              :image="currentUser?.profile"
+              :subject="item.subject"
+              :status="item.status"
+              :createdAt="
+                item.createdAt
+                  ? new Date(item.createdAt).toLocaleDateString()
+                  : ''
+              "
+              :createdByName="item.createdByName"
+              :userProfile="currentUser?.profile"
+              :getNameInitials="getNameInitials"
+            />
+          </div>
+        </v-col>
+      </v-row>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  items: Array<Record<string, any>>;
+}>();
+
+const emit = defineEmits(["select", "search"]);
+
+const { currentUser } = useLocalAuth();
+const { getNameInitials, search } = useUtils();
+
+const selectedStatus = ref("All");
+const startDate = ref(null);
+const endDate = ref(null);
+const startMenu = ref(false);
+const endMenu = ref(false);
+
+function _search() {
+  emit("search", search.value);
+}
+</script>