@icvdeveloper/common-module 1.4.14 → 2.1.0

package/dist/runtime/components/chat/ChatCreateConversation.vue

@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import { inject, onMounted, onBeforeUnmount, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { debounce, find, remove } from 'lodash-es';
+import { VueEternalLoading } from '@ts-pro/vue-eternal-loading';
+import { useConversationStore } from '#imports';
+import { chatSearchEventHook } from '../../composables/useEventHooks';
+import type { LoadAction } from '@ts-pro/vue-eternal-loading';
+import type { User, UsersResult } from '../../models/user';
+
+const conversationStore = useConversationStore();
+const { user, users, isInitial } = storeToRefs(conversationStore);
+
+const { getName, createConversation } = conversationStore;
+
+// data
+const selectedUsers = ref<User[]>([] as User[]);
+const filteredUsers = ref<UsersResult>({} as UsersResult);
+
+// injected load function
+// (see Vue Eternal Loading docs for reference: https://ts-pro.github.io/vue-eternal-loading/guide/simple-usage.html)
+const load = inject('attendeeListLoad', (loaded: LoadAction) => { console.log('no scroll'); loaded(0); })
+
+// methods
+const toggle = (user: User) => {
+  console.log('selected: ', user.name);
+  if (exists(user) == undefined) {
+    console.log('user not already selected');
+    selectedUsers.value?.push(user);
+  } else {
+    console.log('user already selected, removing');
+    const array = selectedUsers.value as User[];
+
+    remove(array, (element) => {
+      return element.id === user.id;
+    });
+
+    selectedUsers.value = [...array];
+  }
+};
+
+const exists = (user: User): User | undefined => {
+  return find(selectedUsers.value, {'id': user.id});
+};
+
+const onSearchChange = debounce((value: string) => {
+  console.log('debounced');
+  chatSearchEventHook.trigger({value: value, iterate: true});
+}, 500);
+
+const clear = (): void => {
+  console.log('clear');
+  chatSearchEventHook.trigger({value: undefined, iterate: true});
+};
+
+watch(users.value, (_users, _newUsers) => {
+  filteredUsers.value = _newUsers;
+});
+
+// lifecycle hooks
+onMounted(() => {
+  filteredUsers.value = users.value;
+});
+
+onBeforeUnmount(() => {
+  clear();
+});
+</script>
+
+<template>
+  <div class="flex h-full justify-between flex-col overflow-y-hidden">
+    <CommonSearchInput
+      @on-change="onSearchChange"
+      @clear="clear"
+    />
+    <div class="overflow-y-auto h-full bg-gray-300">
+      <!-- Selected Users -->
+      <div class="z-50 sticky flex pin-t border-b-4 border-blue bg-gray-300 overflow-x-auto">
+        <div
+          v-if="selectedUsers?.length"
+          class="flex flex-row"
+        >
+          <div
+            v-for="currentUser in selectedUsers"
+            :key="currentUser.id"
+            class="py-1"
+          >
+            <div
+              v-if="currentUser.id !== user.data.id"
+              class="selected-user-item"
+              @click="toggle(currentUser)"
+            >
+              <CommonSvgIcon icon="person" />
+              <div class="text-sm py-2">
+                <p class="pt-2 text-black leading-none">
+                  {{ getName(currentUser) }}
+                </p>
+              </div>
+              <CommonSvgIcon icon="close" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="flex py-4 w-full"
+        >
+          <p class="text-center mb-0 text-green-500 w-full">
+            Select one or more users to chat with,
+            <br>
+            then click Start Chat
+          </p>
+        </div>
+      </div>
+
+      <!-- All Users -->
+      <div
+        v-for="currentUser in filteredUsers?.data"
+        :key="currentUser.id"
+      >
+        <div
+          v-if="currentUser.id !== user.data.id && !exists(currentUser)"
+          class="user-item"
+          @click="toggle(currentUser)"
+        >
+          <CommonSvgIcon
+            v-if="currentUser.online"
+            icon="online"
+          />
+          <CommonSvgIcon
+            v-if="!currentUser.online"
+            icon="offline"
+          />
+          <CommonSvgIcon
+            icon="person"
+          />
+          <div class="text-sm py-4">
+            <p class="pt-2 text-black leading-none">
+              {{ getName(currentUser) }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <VueEternalLoading
+        v-model:is-initial="isInitial"
+        :load="load"
+      >
+        <template #no-more>
+          &nbsp;
+        </template>
+      </VueEternalLoading>
+    </div>
+    <button
+      v-if="selectedUsers?.length !== 0"
+      class="create-conversation-button bg-blue-500 border-0 hover:bg-blue-700 text-white font-bold py-3 px-4 focus:outline-none cursor-pointer"
+      type="button"
+      @click="createConversation(selectedUsers as User[])"
+    >
+      Start Chat
+    </button>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+  .disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+
+  .disabled:hover {
+    background-color: #3490dc !important;
+  }
+
+  .create-conversation-button {
+    border-bottom-left-radius: 9px;
+    border-bottom-right-radius: 9px;
+  }
+
+  .user-item {
+    @apply cursor-pointer flex items-center px-4 bg-gray-300;
+    border-bottom: 1px solid #dae1e7;
+    &:hover {
+      background-color: lighten(#dae1e7, 10%);
+    }
+    &:active {
+      background-color: darken(#dae1e7, 10%);
+    }
+  }
+
+  .selected-user-item {
+    @apply cursor-pointer flex items-center px-4 border-r-2 border-gray-400;
+    &:hover {
+      background-color: lighten(#dae1e7, 10%);
+    }
+    &:active {
+      background-color: darken(#dae1e7, 10%);
+    }
+  }
+</style>

package/dist/runtime/components/chat/ChatCreateGroupConversation.vue

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { inject, onMounted, onBeforeUnmount, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { debounce, find, remove } from 'lodash-es';
+import { VueEternalLoading } from "@ts-pro/vue-eternal-loading";
+import { useConversationStore } from '../../store/conversations';
+import { chatSearchEventHook } from '../../composables/useEventHooks';
+import type { LoadAction } from "@ts-pro/vue-eternal-loading";
+import type { User } from '../../models/user';
+
+// data
+const selectedUsers = ref<User[]>();
+const filteredUsers = ref<User[]>();
+
+const conversationStore = useConversationStore();
+
+const { user, users, isInitial } = storeToRefs(conversationStore);
+
+// emits
+const emit = defineEmits<{
+  (event: 'onCreate', value: User[]): void;
+}>();
+
+// injected load function
+// (see Vue Eternal Loading docs for reference: https://ts-pro.github.io/vue-eternal-loading/guide/simple-usage.html)
+const load = inject('attendeeListLoad', (loaded: LoadAction) => { console.log('no scroll'); loaded(0); })
+
+const { getName } = conversationStore;
+
+// methods
+const toggle = (user: User) => {
+  if (exists(user) == undefined) {
+    selectedUsers.value?.push(user);
+  } else {
+    const array = selectedUsers.value as User[];
+
+    remove(array, (element) => {
+      return element.id === user.id;
+    });
+
+    selectedUsers.value = [...array];
+  }
+};
+
+const exists = (user: User): User | undefined => {
+  return find(selectedUsers.value, {'id': user.id});
+};
+
+const onSearchChange = debounce((value: string) => {
+  chatSearchEventHook.trigger({value: value, iterate: true});
+}, 500);
+
+const clear = (): void => {
+  chatSearchEventHook.trigger({value: undefined, iterate: true});
+};
+
+watch(users.value, (_users, _newUsers) => {
+  filteredUsers.value = _newUsers.data;
+});
+
+// lifecycle hooks
+onMounted(() => {
+  filteredUsers.value = users.value.data;
+});
+
+onBeforeUnmount(() => {
+  clear();
+});
+</script>
+
+<template>
+  <div class="flex h-full justify-between flex-col overflow-y-hidden">
+    <CommonSearchInput
+      @on-change="onSearchChange"
+    />
+    <div class="overflow-y-auto h-full bg-grey-lighter">
+      <!-- Selected Users -->
+      <div
+        v-if="selectedUsers?.length"
+        class="z-50 sticky pin-t border-b-4 border-blue bg-grey-lighter"
+      >
+        <div
+          v-for="currentUser in selectedUsers"
+          :key="currentUser.id"
+        >
+          <div
+            v-if="currentUser.id !== user.id"
+            class="cursor-pointer flex items-center px-4"
+            style="border-bottom: 1px solid #dae1e7"
+            @click="toggle(currentUser)"
+          >
+            <CommonSvgIcon icon="check" />
+            <CommonSvgIcon icon="person" />
+            <div class="text-sm py-2">
+              <p class="pt-2 text-black leading-none">
+                {{ getName(currentUser) }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- All Users -->
+      <div
+        v-for="currentUser in filteredUsers"
+        :key="currentUser.id"
+      >
+        <div
+          v-if="currentUser.id !== user.id"
+          :class="{selected: exists(currentUser), 'bg-grey-lighter': !exists(currentUser) }"
+          class="cursor-pointer flex items-center px-4"
+          style="border-bottom: 1px solid #dae1e7"
+          @click="toggle(currentUser)"
+        >
+          <CommonSvgIcon
+            v-if="currentUser.online"
+            icon="online"
+          />
+          <CommonSvgIcon
+            v-else
+            icon="online"
+          />
+          <CommonSvgIcon
+            icon="person"
+          />
+          <div class="text-sm py-4">
+            <p class="pt-2 text-black leading-none">
+              {{ getName(currentUser) }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <VueEternalLoading
+        v-model:is-initial="isInitial"
+        :load="load"
+      >
+        <template #no-more>
+          &nbsp;
+        </template>
+      </VueEternalLoading>
+    </div>
+    <button
+      class="create-conversation-button bg-blue border-0 hover:bg-blue-dark text-white font-bold py-3 px-4 focus:outline-none cursor-pointer"
+      type="button"
+      @click="emit('onCreate', selectedUsers as User[])"
+    >
+      Create Conversation
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.selected{background-color:#b8c2cc}.create-conversation-button{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
+</style>

package/dist/runtime/components/chat/ChatHeader.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { useConversationStore } from '#imports';
+
+import { MenuOptions } from './ChatWindow.vue';
+
+const { toggleChat } = useConversationStore();
+
+const emit = defineEmits<{
+  (event: 'itemSelected', value: MenuOptions): void;
+}>();
+</script>
+
+<template>
+  <div class="header bg-blue-500">
+    <div class="flex flex-row text-center text-white w-full">
+      <div
+        class="flex-1 grow flex items-center h-full header-button"
+        @click="emit('itemSelected', MenuOptions.LIST)"
+      >
+        <p class="flex-1 py-0 px-2 m-0">
+          All Chats
+        </p>
+      </div>
+      <div
+        class="flex-1 flex items-center h-full header-button"
+        @click="emit('itemSelected', MenuOptions.CREATE)"
+      >
+        <p class="flex-1 py-0 px-2 m-0">
+          New Chat
+        </p>
+      </div>
+      <div
+        class="flex-shrink flex items-center h-full header-button"
+        @click="toggleChat"
+      >
+        <CommonSvgIcon
+          class="flex-1 flex items-center justify-center"
+          fill-color="white"
+          icon="close"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+  .header {
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    padding: .25rem;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+  }
+  .header-title {
+    align-self: center;
+    padding: 10px;
+    flex: 1;
+    user-select: none;
+    font-size: 16px;
+  }
+
+  .header-button {
+    align-self: center;
+    cursor: pointer;
+    border-radius: 5px;
+    padding: .5rem;
+    &:hover {
+      @apply shadow;
+      &:active {
+        @apply shadow-inner;
+      }
+    }
+  }
+
+  .icon-button {
+    width: 40px;
+    height: 40px;
+    padding: 13px;
+    margin-left: auto;
+    margin-right: 10px;
+    box-sizing: border-box;
+  }
+
+  .header-button img, .header-button svg {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  @media (max-width: 450px) {
+    .header {
+      border-radius: 0;
+    }
+  }
+</style>

package/dist/runtime/components/chat/ChatMessage.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+type Props = {
+  from: string;
+  time: string;
+  text: string;
+  inbound: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { from, time, text, inbound } = toRefs(props);
+</script>
+
+<template>
+  <div class="clearfix">
+    <div
+      class="w-3/4 mx-4"
+      :class="{ 'float-right': !inbound }"
+    >
+      <div class="flex items-start items-center mb-4 text-sm">
+        <CommonSvgIcon icon="person" />
+        <div class="flex-1 overflow-hidden">
+          <p class="text-gray-500 text-xs mt-0 pt-1">
+            {{ from }}
+          </p>
+          <p
+            class="rounded border-2 border-gray-100 leading-normal m-0 p-2"
+            :class="{'bg-blue-500 text-white' : !inbound, 'bg-gray-100 text-black' : inbound}"
+          >
+            {{ text }}
+          </p>
+          <p class="text-gray-500 text-xs mt-0 pt-1">
+            {{ time }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/chat/ChatShowConversation.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { useConversationStore } from '#imports';
+import MessageInput from './MessageInput.vue';
+import { sendMessageEventHook } from '../../composables/useEventHooks';
+import type { User } from '../../models/user';
+import type { Conversation } from '../../models/conversation';
+
+const conversationStore = useConversationStore();
+
+const { selectedConversation, user } = storeToRefs(conversationStore);
+
+const { getName } = conversationStore;
+
+// methods
+const isInbound = (userArg: User): boolean => {
+  return userArg.id !== user.value.data.id;
+};
+</script>
+
+<template>
+  <div class="flex justify-between flex-col h-full overflow-y-hidden">
+    <div class="overflow-y-auto">
+      <div class="z-50 sticky flex pin-t border-b-4 border-blue-500 bg-gray-300 overflow-x-auto">
+        <div class="flex flex-row">
+          <div
+            v-for="currentUser in selectedConversation?.users"
+            :key="currentUser.id"
+            class="py-1"
+          >
+            <div
+              v-if="currentUser.id !== user.id"
+              class="flex items-center px-4 border-r-2 border-gray-400"
+            >
+              <CommonSvgIcon icon="person" />
+              <div class="text-sm py-2">
+                <p class="pt-2 text-black leading-none">
+                  {{ getName(currentUser) }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="Object.keys(selectedConversation as Conversation[]).length > 0 && selectedConversation?.user?.id !== user.id"
+            class="py-1"
+          >
+            <div
+              class="flex items-center px-4 border-r-2 border-gray-400"
+            >
+              <CommonSvgIcon icon="person" />
+              <div class="text-sm py-2">
+                <p class="pt-2 text-black leading-none">
+                  {{ getName(selectedConversation?.user as User) }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <CommonChatMessage
+          v-for="message in selectedConversation?.messages"
+          :key="message.id"
+          :from="message?.user?.name"
+          :text="message.message"
+          :time="message.created_at"
+          :inbound="isInbound(message?.user as User)"
+        />
+      </div>
+    </div>
+
+    <MessageInput @send-message="(message: string) => {console.log('message event: ', message); sendMessageEventHook.trigger(message)}" />
+  </div>
+</template>

package/dist/runtime/components/chat/ChatWidget.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+import { toggleChatWindowEventHook } from '../../composables/useEventHooks';
+import ChatWindow from './ChatWindow.vue';
+import SvgIcon from '../core/SvgIcon.vue';
+
+type Props = {
+  hasNotifications: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { hasNotifications } = toRefs(props);
+</script>
+
+<template>
+  <div>
+    <div
+      class="launcher"
+      @click="toggleChatWindowEventHook.trigger()"
+    >
+      <SvgIcon icon="chat" />
+    </div>
+
+    <div
+      v-if="hasNotifications"
+      class="bell"
+    >
+      <SvgIcon icon="bell" />
+    </div>
+
+    <ChatWindow
+      @close="toggleChatWindowEventHook.trigger()"
+    />
+  </div>
+</template>
+
+<style scoped>
+.launcher{background-position:50%;background-repeat:no-repeat;border-radius:50%;bottom:25px;box-shadow:none;cursor:pointer;height:60px;right:75px;transition:box-shadow .2s ease-in-out;width:60px}.bell,.launcher{position:fixed;z-index:9999}.bell{bottom:60px;padding:2px 0;right:15px}.bell svg{height:90px}
+</style>