contactstudiocstools 1.0.224

package/dist/runtime/components/Molecule.Status.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    :disabled="disabled"
+    class="w-4 bg-slate-700 rounded-full"
+  >
+    <!-- current -->
+    <div
+      :class="getStatusColor(current)"
+      class="flex justify-end rounded-full dark"
+    >
+      <p class="text-xs mr-2 whitespace-nowrap max-sm:hidden">
+        <span
+          :class="getStatusColor(current)"
+          class="badge bg-transparent badge-outline font-bold"
+        >
+          {{ new Date(milliseconds).toISOString().slice(11, 19) }}
+        </span>
+        {{ getStatusLabel(current) }}
+      </p>
+      <p
+        :dropdown-trigger="dropdownID"
+        class="sizes cursor-pointer flex justify-center items-center"
+      >
+        <i
+          class="bi-caret-down-fill !text-[11px] mt-0.5 text-white pointer-events-none"
+        />
+      </p>
+    </div>
+
+    <div class="my-2" />
+
+    <!-- next -->
+    <div class="flex justify-end">
+      <span
+        :class="getStatusColor(next)"
+        class="text-xs mr-2 !bg-transparent max-sm:hidden"
+        v-text="getStatusLabel(next)"
+      />
+
+      <p class="sizes rounded-full flex justify-center items-center bottom-0">
+        <span
+          :class="getStatusColor(next)"
+          class="w-2 h-2 rounded-full"
+        />
+      </p>
+    </div>
+
+    <!-- dropdown -->
+    <AtomDropdown
+      :dropdown="dropdownID"
+      class="!p-1"
+    >
+      <li
+        :class="getStatusColor(current)"
+        class="text-xs !text-[11px] !bg-transparent !p-2 !py-0.5 sm:hidden"
+      >
+        <i class="bi-caret-down-fill text-[10px]" />
+        {{ getStatusLabel(current) }}
+      </li>
+
+      <li
+        :class="getStatusColor(next)"
+        class="text-xs !text-[11px] !bg-transparent !p-2 !py-0.5 sm:hidden"
+      >
+        <i class="bi-circle-fill text-[6px] px-0.5" />
+        {{ getStatusLabel(next) }}
+      </li>
+
+      <div class="divider sm:hidden" />
+
+      <li
+        v-for="(item, i) in pauses"
+        :key="i"
+        class="item text-xs !p-2"
+        @click="set(item)"
+        v-text="item.label"
+      />
+    </AtomDropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+import { randomID } from "./types";
+import { EUserStatus, IPause, IPauses } from "./types";
+
+// props
+interface IProps {
+  startedAt: Date;
+  current: EUserStatus;
+  next: EUserStatus;
+  pauses: IPauses;
+  pause?: IPause;
+  set: Function;
+}
+const props = defineProps<IProps>();
+
+// mounted
+onMounted(() => {
+  resetSeconds();
+});
+
+// computed
+const getStatusLabel = computed<Function>(() => (status: EUserStatus) => {
+  if (status !== EUserStatus.pause) return status;
+
+  return props.pause?.label;
+});
+const getStatusColor = computed<Function>(() => (status: EUserStatus) => {
+  if (status === EUserStatus.active) return "bg-active text-active";
+  if (status === EUserStatus.attendance) return "bg-attendance text-attendance";
+  if (status === EUserStatus.available) return "bg-available text-available";
+
+  return "bg-pause text-pause";
+});
+
+// data
+let counter: any;
+const dropdownID = ref<string>(randomID());
+const disabled = ref<boolean>(false);
+const milliseconds = ref<number>(0);
+
+// methods
+async function set(pause: IPause): Promise<void> {
+  disabled.value = true;
+  await props.set(pause);
+  disabled.value = false;
+}
+function resetSeconds(): void {
+  milliseconds.value = 0;
+
+  window.clearInterval(counter);
+  counter = window.setInterval(() => {
+    milliseconds.value = Math.abs(props.startedAt.getTime() - new Date().getTime());
+  }, 1000);
+}
+
+// watch
+watch(
+  () => props.current,
+  () => {
+    resetSeconds();
+  }
+);
+</script>
+
+<style scoped>
+.sizes {
+  min-width: 1rem;
+  max-width: 1rem;
+  min-height: 1rem;
+  max-height: 1rem;
+}
+</style>

package/dist/runtime/components/Molecule.TimeDaily.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>teste</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Organism.Attachments.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <MoleculeFile
+      v-for="({ file, ID }, i) in attachments"
+      :key="i"
+      :file="file.file"
+      :hints="file.hints"
+      :status="file.status"
+      class="flex-1"
+      actions
+    >
+      <li
+        class="item !p-2 text-error"
+        @click="deleteAttachment(ID)"
+      >
+        <i class="bi-trash" /> Excluir
+      </li>
+    </MoleculeFile>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from "vue";
+import {
+  EFieldStatus,
+  IAttachment,
+  IAttachments,
+  logger,
+  randomID,
+} from "./types";
+import { onMounted } from "vue";
+
+// props
+interface IProps {
+  inputFileRef?: HTMLInputElement;
+  init: () => Promise<IAttachments>;
+  delete: (attachment: IAttachment) => Promise<void>;
+  upload: (file: File) => Promise<any>;
+}
+const props = defineProps<IProps>();
+
+// mounted
+onMounted(async () => {
+  const uploadedAttachments = await props.init();
+
+  if (!uploadedAttachments) return;
+
+  attachments.push(...uploadedAttachments);
+});
+
+// data
+const attachments = reactive<IAttachments>([]);
+
+// methods
+function setOnChangeEvent(): void {
+  if (!props.inputFileRef) return;
+
+  props.inputFileRef.onchange = getAttachmentsOnChange;
+}
+
+function getAttachmentsOnChange(e: Event): void {
+  const inputFiles = (e.target as HTMLInputElement).files;
+
+  if (!inputFiles) return;
+
+  for (const file of inputFiles) {
+    const ID = randomID();
+
+    attachments.push({
+      ID,
+      file: { file },
+    });
+
+    addAttachment({ ID, file });
+  }
+
+  resetInputFile();
+}
+
+async function addAttachment({ ID, file }: any): Promise<void> {
+  const index = getAttachmentIndexByID(ID);
+
+  setLoadingStatusOnFile(index);
+
+  if (!props.upload) return;
+
+  try {
+    const primitive = await props.upload(file);
+    setPrimitiveOnAttachment({ index, primitive });
+    setSuccessStatusOnFile(index);
+  } catch (e: any) {
+    setErrorStatusOnFile(index);
+    logger.error("OrganismAttachments:AddAttachment", { e });
+  }
+}
+
+function getAttachmentIndexByID(ID: string): number {
+  return attachments.findIndex((attachment) => attachment.ID === ID);
+}
+
+function resetInputFile(): void {
+  if (!props.inputFileRef) return;
+  props.inputFileRef.value = "";
+}
+
+async function deleteAttachment(ID: string): Promise<void> {
+  const index = getAttachmentIndexByID(ID);
+
+  try {
+    setLoadingStatusOnFile(index);
+
+    await props.delete(attachments[index]);
+
+    attachments.splice(index, 1);
+  } catch (e: any) {
+    setErrorStatusOnFile(index);
+    logger.error("OrganismAttachments:deleteAttachment", { e });
+  }
+}
+
+function setPrimitiveOnAttachment({ index, primitive }: any): void {
+  attachments[index].primitive = primitive;
+}
+function setLoadingStatusOnFile(index: number): void {
+  attachments[index].file.status = EFieldStatus.loading;
+}
+function setSuccessStatusOnFile(index: number): void {
+  attachments[index].file.status = EFieldStatus.success;
+}
+
+function setErrorStatusOnFile(index: number): void {
+  attachments[index].file.status = EFieldStatus.error;
+}
+
+// watch
+watch(() => props.inputFileRef, setOnChangeEvent);
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Organism.ChatMessages.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-for="(message, i) in messages"
+    :key="i"
+  >
+    <MoleculeChatMessageText
+      v-if="message.type === EChatMessageTypes.text"
+      :message="message"
+    />
+    <MoleculeChatMessageOption
+      v-if="message.type === EChatMessageTypes.option"
+      :message="message"
+    />
+    <MoleculeChatMessageFile
+      v-if="message.type === EChatMessageTypes.file"
+      :message="message"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IChatMessages, EChatMessageTypes } from './types';
+
+// props
+interface IProps {
+  messages?: IChatMessages;
+}
+defineProps<IProps>();
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Organism.ChatRoom.vue

@@ -0,0 +1,342 @@
+<template>
+  <AtomBannerChatEmpty v-if="!contact" />
+  <div
+    v-else
+    class="w-full flex flex-col max-h-screen"
+  >
+    <!-- header -->
+    <header class="flex items-center h-12 px-5">
+      <!-- avatar -->
+      <figure
+        :class="[getStatusClass]"
+        class="w-10 h-10 avatar avatar-soft-secondary"
+      >
+        <img
+          v-if="contact.avatar"
+          :src="contact.avatar"
+          class="rounded-md"
+        >
+        <i
+          v-else
+          class="bi-person-fill text-xl"
+        />
+      </figure>
+
+      <!-- info -->
+      <div class="ml-3">
+        <p
+          class="text-sm"
+          v-text="contact?.label"
+        />
+        <p
+          v-if="contact.typing"
+          class="text-success text-xs"
+        >
+          Digitando...
+        </p>
+      </div>
+    </header>
+
+    <div class="divider" />
+
+    <!-- messages -->
+    <article
+      ref="OrganismChatMessagesRef"
+      class="scrollbar flex flex-col flex-1 overflow-y-auto p-3"
+    >
+      <div
+        v-if="!messages?.length"
+        class="w-full h-full flex justify-center items-center"
+      >
+        <span class="spin" />
+      </div>
+
+      <OrganismChatMessages :messages="messages" />
+    </article>
+
+    <!-- subject -->
+    <span
+      v-if="subject"
+      :tooltip="subject"
+      class="badge badge-outline-secondary text-xs flex justify-center items-center gap-1 cursor-pointer"
+    >
+      <i class="bi-info-circle text-sm" />
+      Resumo Jornada
+    </span>
+
+    <!-- suggestions -->
+    <div
+      v-if="greetings?.length || goodbyes?.length || absents?.length"
+      class="divider"
+    />
+
+    <div
+      v-if="greetings?.length || goodbyes?.length || absents?.length"
+      :disabled="!contact?.on"
+      class="flex flex-wrap gap-2 overflow-x-auto scrollbar px-3 my-2"
+    >
+      <div
+        v-for="(greeting, i) in greetings"
+        :key="i"
+        :tooltip="marked(greeting)"
+        class="suggestions badge badge-solid-success rounded w-14 whitespace-nowrap cursor-pointer"
+        @click="send(greeting)"
+        v-html="marked(greeting)"
+      />
+      <div
+        v-for="(absent, i) in absents"
+        :key="i"
+        :tooltip="marked(absent)"
+        class="suggestions badge badge-solid-secondary rounded w-14 whitespace-nowrap cursor-pointer"
+        @click="send(absent)"
+        v-html="marked(absent)"
+      />
+      <div
+        v-for="(goodbye, i) in goodbyes"
+        :key="i"
+        :tooltip="marked(goodbye)"
+        class="suggestions badge badge-solid-error rounded w-14 whitespace-nowrap cursor-pointer"
+        @click="send(goodbye)"
+        v-html="marked(goodbye)"
+      />
+    </div>
+
+    <div class="divider" />
+
+    <!-- footer -->
+    <footer
+      :disabled="!contact.on"
+      class="flex item p-3"
+    >
+      <label class="field-group flex-1 cursor-text mr-2">
+        <div
+          ref="textareaRef"
+          class="textarea input w-48 !max-h-36 overflow-y-auto scrollbar whitespace-pre-wrap cursor-text"
+          contenteditable
+          @paste.prevent="verifyPaste"
+          @keydown.enter="inputSend"
+          @keyup="typing(true), persist()"
+          @blur="typing(false)"
+        />
+      </label>
+      <label
+        class="h-fit btn"
+        @click="reset"
+      >
+        <i class="bi bi-x-lg text-base text-error" />
+      </label>
+      <label
+        for="chatfiles"
+        class="h-fit btn"
+      >
+        <input
+          id="chatfiles"
+          type="file"
+          class="hidden"
+          @change="sendFile"
+        >
+        <i class="bi bi-paperclip text-xl leading-none" />
+      </label>
+
+      <button
+        class="btn-rounded btn btn-solid-primary rounded-full"
+        @click="send(getText())"
+      >
+        <i class="bi-send-fill" />
+      </button>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { IChatContact, IChatMessages, sleep } from "./types";
+import { marked } from "marked";
+import { useNuxtApp } from "#app";
+
+// props
+interface IProps {
+  contact?: IChatContact;
+  messages?: IChatMessages;
+  loading?: boolean;
+  goodbyes?: string[];
+  greetings?: string[];
+  absents?: string[];
+  persist?: Function;
+  defaults?: string;
+  subject?: string;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "back"): void;
+  (e: "typing", typing: boolean): void;
+  (e: "send", text: string): void;
+  (e: "sendFile", file: File): void;
+}
+const emit = defineEmits<IEmits>();
+
+// listen
+const { $listen } = useNuxtApp();
+$listen("message:concatenate", (message: any) => {
+  if (!textareaRef.value) return;
+
+  if (textareaRef.value.innerText.trim() === "") {
+    textareaRef.value.innerText = message;
+    return;
+  }
+
+  textareaRef.value.innerText = `${textareaRef.value.innerText}
+
+${message}`;
+});
+$listen("message:clear", clear)
+
+// computed
+const getStatusClass = computed<string>(() => {
+  if (props.contact?.on) return "avatar-status-success";
+  return "avatar-status-error";
+});
+
+// data
+const textareaRef = ref<HTMLElement>();
+const OrganismChatMessagesRef = ref<HTMLElement>();
+const lastTyping = ref<boolean>(false);
+
+// methods
+async function verifyPaste(): Promise<void> {
+  const clipboard = await navigator.clipboard.readText();
+
+  if (clipboard === "") return;
+  set(getText() + clipboard);
+
+  setEndOfContenteditable(textareaRef.value);
+}
+function persist(): void {
+  if (!props.persist) return;
+
+  props.persist(getText());
+}
+function typing(typing: boolean): void {
+  if (lastTyping.value === typing) return;
+
+  lastTyping.value = typing;
+  emit("typing", typing);
+}
+function getText(): string {
+  return textareaRef.value?.innerText ?? "";
+}
+async function send(text: string): Promise<void> {
+  if (!text.trim().length) return;
+  emit("send", text);
+  reset();
+  await sleep(200);
+  typing(false);
+}
+function sendFile({ target }: Event): void {
+  const input = target as HTMLInputElement;
+  if (!input.files) return;
+  const file = input.files[0];
+  emit("sendFile", file);
+  input.value = "";
+}
+function inputSend(e: KeyboardEvent): void {
+  if (e.shiftKey || e.ctrlKey || e.altKey) return;
+
+  e.preventDefault();
+  send(getText());
+}
+function clear(): void {
+  if (!textareaRef.value) return;
+  textareaRef.value.innerText = "";
+}
+function reset(): void {
+  clear()
+  persist();
+}
+function set(text: string): void {
+  if (textareaRef.value) {
+    textareaRef.value.innerText = text;
+    return;
+  }
+
+  setTimeout(() => {
+    set(text);
+  }, 1000);
+}
+
+let timer: any;
+function scrollBottom() {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    OrganismChatMessagesRef.value?.scroll({
+      top: OrganismChatMessagesRef.value.scrollHeight,
+      behavior: "smooth",
+    });
+  }, 0);
+}
+
+function setEndOfContenteditable(contentEditableElement?: HTMLElement) {
+  if (!contentEditableElement) return;
+
+  const range = document.createRange();
+  range.selectNodeContents(contentEditableElement);
+  range.collapse(false);
+
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+// watch
+watch(
+  () => props.messages,
+  () => {
+    scrollBottom();
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.defaults,
+  () => {
+    set(props.defaults ?? "");
+  },
+  { deep: true }
+);
+
+// expose
+defineExpose({ set, reset });
+</script>
+
+<style>
+.textarea {
+  min-height: 30px;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.textarea:focus {
+  box-shadow: none !important;
+}
+
+.dark .textarea,
+.dark .textarea:focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.suggestions > p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.btn-rounded {
+  min-width: 35px;
+  max-width: 35px;
+  min-height: 35px;
+  max-height: 35px;
+  padding: 0px !important;
+}
+</style>