contactstudiocstools 1.0.224

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

@@ -0,0 +1,146 @@
+<template>
+  <article class="flex flex-col">
+    <MoleculeSelectTreeSearchable
+      ref="MoleculeSelectTreeSearchableEl"
+      :select-tree="selectTree"
+      :class="{ error: !isValid }"
+      label="Manifestação"
+      @add="add"
+    />
+
+    <div class="accordion accordion-bordered mt-3">
+      <details
+        v-for="(levels, i) in manifestations"
+        :key="i"
+        class="item"
+      >
+        <summary
+          arrow=""
+          class="!px-2 flex justify-between"
+        >
+          <div
+            class="flex flex-1 flex-wrap gap-1"
+            @click="link(i)"
+          >
+            <div class="px-1">
+              <i
+                v-if="levelLinked === i"
+                class="bi-check-circle-fill text-success"
+              />
+              <i
+                v-else
+                class="bi-check-circle-fill text-secondary opacity-50"
+              />
+            </div>
+
+            <span
+              v-for="({ label }, j) in levels"
+              :key="j"
+              class="badge badge-soft-secondary"
+              v-text="label"
+            />
+          </div>
+
+          <i
+            class="bi-x-circle-fill text-error px-2"
+            @click="remove(i)"
+          />
+        </summary>
+      </details>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from "vue";
+import { ISelectTree, INodes } from "./types";
+import MoleculeSelectTreeSearchable from "./Molecule.SelectTreeSearchable.vue";
+import { deepEqual } from "./types"
+
+// props
+interface Props {
+  selectTree: ISelectTree;
+  persist?: Function;
+  defaults?: INodes[];
+}
+const props = defineProps<Props>();
+
+// computed
+const isValid = computed<boolean>(() => !!manifestations.length);
+
+// data
+const MoleculeSelectTreeSearchableEl = ref<InstanceType<
+  typeof MoleculeSelectTreeSearchable
+> | null>(null);
+const manifestations = reactive<INodes[]>(props.defaults ?? []);
+const levelLinked = ref<number | null>(null)
+
+// methods
+function link(index: number): void {
+  if (levelLinked.value === index) {
+    return unlink()
+  }
+
+  levelLinked.value = index
+  emit("link", manifestations[index])
+}
+function unlink(): void {
+  levelLinked.value = null
+  emit("unlink")
+}
+function remove(index: number) {
+  manifestations.splice(index, 1);
+  persist();
+  unlink()
+}
+function add(nodes: INodes): void {
+  if (thisNodesExists(nodes)) return;
+
+  manifestations.push(nodes);
+
+  persist();
+}
+function thisNodesExists(nodes: INodes): boolean {
+  if (!manifestations.length) return false;
+
+  for (const manifestation of manifestations) {
+    let equals = 0;
+
+    for (const index in nodes) {
+      if (deepEqual(manifestation[index], nodes[index])) {
+        equals++;
+      }
+    }
+
+    if (equals === nodes.length) {
+      return true;
+    }
+  }
+
+  return false;
+}
+function persist(): void {
+  if (!props.persist) return;
+
+  props.persist(manifestations)
+}
+function append(nodes: INodes[]): void {
+  manifestations.push(...nodes);
+}
+function reset(): void {
+  manifestations.length = 0;
+  unlink()
+}
+
+// emits
+interface IEmits {
+  (e: "link", node: INodes): void
+  (e: "unlink"): void
+}
+const emit = defineEmits<IEmits>()
+
+// expose
+defineExpose({ manifestations, isValid, append, reset });
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,27 @@
+<template>
+  <nav
+    :class="{ visible }"
+    class="sidenav scrollbar flex flex-col justify-between pt-20 pb-5"
+    @mouseenter="show"
+    @mouseleave="hide"
+  >
+    <slot />
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// data
+const visible = ref<boolean>(false);
+
+// methods
+function show(): void {
+  visible.value = true;
+}
+function hide(): void {
+  visible.value = false;
+}
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,187 @@
+<template>
+  <nav
+    v-click-outside="outside"
+    :class="{ visible }"
+    class="sidenav flex flex-col justify-between pt-[64px] max-sm:w-0 pb-5 px-0"
+    @mouseenter="show"
+    @mouseleave="hide"
+  >
+    <div>
+      <!-- warns -->
+      <ul
+        :disabled="!warns?.length"
+        class="accordion mx-1 pt-2"
+      >
+        <details
+          id="accordion-warns"
+          class="item sidenav-item-full"
+        >
+          <summary class="flex items-center h-12 -mb-1 -mt-1">
+            <i
+              class="bi-exclamation-triangle-fill leading-none text-base text-warn -translate-x-[2px] mr-5"
+            />
+            <span class="inline-flex w-40">Avisos</span>
+
+            <span
+              v-if="warns?.length"
+              class="badge badge-solid-warn rounded w-5 h-5 flex justify-center items-center !p-0"
+              v-text="warns?.length"
+            />
+          </summary>
+          <article class="!pt-0 warn-items">
+            <p
+              v-for="(warn, i) in warns"
+              :key="i"
+              class="text-xs w-60 my-2"
+              v-text="warn"
+            />
+          </article>
+        </details>
+      </ul>
+
+      <div class="divider" />
+
+      <!-- pages -->
+      <NuxtLink
+        v-for="({ icon, label, path, name }, i) in pages"
+        :key="i"
+        :to="path"
+        class="list sidenav-item-full"
+        @click="outside"
+      >
+        <li
+          class="item sidenav-item mb-2 mx-1"
+          :class="{ 'bg-slate-100 dark:bg-slate-800': isPageActive(name) }"
+        >
+          <i
+            :class="icon"
+            class="text-base leading-none -translate-x-[2px] mr-5"
+          />
+          {{ label }}
+        </li>
+      </NuxtLink>
+
+      <div class="divider my-3" />
+
+      <!-- FAQ -->
+      <aside
+        v-if="FAQIsNotEmpty"
+        class="mx-1"
+      >
+        <ul
+          v-show="!visible"
+          class="list"
+        >
+          <li class="item">
+            <i class="bi-search -translate-x-[2px]" />
+          </li>
+        </ul>
+
+        <div v-show="visible">
+          <OrganismFAQ
+            :doubts="doubts ?? []"
+            class="w-72 max-h-72 overflow-y-auto scrollbar px-2"
+          />
+        </div>
+        <div class="divider my-3" />
+      </aside>
+    </div>
+
+    <div>
+      <!-- darkmode -->
+      <ul class="list sidenav-item-full px-1 mt-1">
+        <li
+          class="item flex justify-between items-center sidenav-item active"
+          @click="changeMode"
+        >
+          <span v-if="visible">Aparência</span>
+          <AtomDarkMode class="-ml-3 pointer-events-none" />
+        </li>
+      </ul>
+      <div class="divider" />
+
+      <!-- exit -->
+      <ul
+        :disabled="!exit"
+        class="list sidenav-item-full px-1"
+      >
+        <li
+          class="item sidenav-item !text-error"
+          @click="logout"
+        >
+          <i class="bi-box-arrow-in-left text-lg leading-none mr-5" />
+          Sair
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useRoute, useNuxtApp } from "#app";
+import { IDoubts, IPages } from "./types";
+
+// props
+interface IProps {
+  pages: IPages;
+  warns?: string[];
+  doubts?: IDoubts;
+  exit?: boolean;
+  logout?: Function;
+}
+const props = defineProps<IProps>();
+
+// app
+const { $listen, $emit } = useNuxtApp();
+
+// computed
+const isPageActive = computed<Function>(() => (page: string) => {
+  return page === useRoute().name;
+});
+const FAQIsNotEmpty = computed<boolean>(() => !!props.doubts?.length);
+
+// data
+
+const visible = ref<boolean>(false);
+
+// methods
+function show(): void {
+  visible.value = true;
+}
+function hide(): void {
+  visible.value = false;
+  closeWarns();
+}
+function outside(e: MouseEvent): void {
+  const isOpenNavButton = (e.target as HTMLElement).id === "navopen";
+
+  if (isOpenNavButton && visible.value) return;
+
+  $emit("nav:hide");
+
+  hide();
+}
+function closeWarns(): void {
+  document.getElementById("accordion-warns")?.removeAttribute("open");
+}
+function logout(): void {
+  if (props.logout) props.logout();
+}
+function changeMode(): void {
+  $emit("darkmode:change")
+}
+
+// emits
+$listen("nav:show", show);
+</script>
+
+<style scoped>
+nav {
+  transition: all 0.3s;
+}
+
+.warn-items {
+  overflow-wrap: break-word;
+}
+</style>

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

@@ -0,0 +1,22 @@
+<template>
+  <article
+    v-if="allowed"
+    class="text-sm min-h-screen overflow-hidden pt-[64px] sm:pl-[60px] dark:text-white"
+  >
+    <slot />
+  </article>
+  <AtomBannerPageUnauthorized
+    v-else
+    class="min-h-screen max-h-screen"
+  />
+</template>
+
+<script setup lang="ts">
+// props
+interface IProps {
+  allowed?: boolean;
+}
+defineProps<IProps>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="accordion accordion-bordered">
+    <!-- items -->
+    <details
+      v-for="(schedule, i) in schedules"
+      :key="i"
+      class="item"
+    >
+      <!-- header -->
+      <summary class="flex justify-between items-center">
+        <!-- info -->
+        <div class="flex flex-wrap items-center">
+          <span
+            :class="getPriorityColor(schedule)"
+            class="h-2 w-2 rounded-full mr-2"
+          />
+
+          <span
+            v-if="schedule.customerID"
+            class="badge badge-solid-secondary mr-2"
+            v-text="schedule.customerID"
+          />
+          <span class="badge badge-soft-secondary mr-2">
+            <i class="bi-clock-history" />
+            {{ schedule.scheduling.toDateString() }}
+          </span>
+          <span v-text="schedule.contactName" />
+        </div>
+
+        <!-- treat button -->
+        <button
+          class="btn btn-outline-secondary mr-2"
+          @click="treat(schedule)"
+        >
+          Tratar Caso
+        </button>
+      </summary>
+
+      <!-- content -->
+      <article>
+        <AtomTabs
+          :tabs="['contact', 'mailing']"
+          @change="(tab: string) => change(tab, schedule)"
+        >
+          <!-- contact -->
+          <template #hcontact>
+            <i class="bi-person-fill mr-1" /> Contato
+          </template>
+          <template #contact>
+            <div class="flex flex-wrap">
+              <!-- cardID -->
+              <div class="m-2">
+                <p class="font-medium text-xs mb-2">
+                  CardID
+                </p>
+                <span
+                  class="badge badge-soft-secondary"
+                  v-text="schedule.cardID"
+                />
+              </div>
+              <!-- lastInteraction -->
+              <div class="m-2">
+                <p class="font-medium text-xs mb-2">
+                  Ultima Interação
+                </p>
+                <span class="badge badge-soft-secondary">
+                  <i class="bi-calendar-check" />
+                  {{ schedule.lastInteraction.toDateString() }}
+                </span>
+              </div>
+              <!-- lastTabulation -->
+              <div class="m-2">
+                <p class="font-medium text-xs mb-2">
+                  Ultima Tabulação
+                </p>
+                <span class="badge badge-soft-secondary">
+                  <i class="bi-calendar-check" />
+                  {{ schedule.lastTabulation.toDateString() }}
+                </span>
+              </div>
+              <!-- scheduling -->
+              <div class="m-2">
+                <p class="font-medium text-xs mb-2">
+                  Agendamento
+                </p>
+                <span class="badge badge-soft-secondary">
+                  <i class="bi-calendar-plus" />
+                  {{ schedule.scheduling.toDateString() }}
+                </span>
+              </div>
+            </div>
+          </template>
+
+          <!-- mailing -->
+          <template #hmailing>
+            <i class="bi-pen-fill mr-1" /> Dados
+          </template>
+          <template #mailing>
+            <article class="flex flex-wrap">
+              <i
+                v-if="mailingIsEmpty"
+                class="spin"
+              />
+
+              <div
+                v-for="(field, label) in mailing[schedule.cardID]"
+                :key="label"
+                class="m-2"
+              >
+                <p
+                  class="font-medium text-xs mb-2"
+                  v-text="label"
+                />
+                <span
+                  class="badge badge-soft-secondary"
+                  v-text="field"
+                />
+              </div>
+            </article>
+          </template>
+        </AtomTabs>
+      </article>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from "vue";
+import { ISchedule, ISchedules } from "./types";
+
+// props
+interface IProps {
+  schedules: ISchedules;
+  load: Function;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "treat", schedule: ISchedule): void;
+}
+const emit = defineEmits<IEmits>();
+
+// computed
+const getPriorityColor = computed<Function>(() => ({ priority }: ISchedule) => {
+  if (!priority) return "bg-green-500";
+  if (priority === 1) return "bg-amber-500";
+  if (priority === 2) return "bg-red-500";
+});
+const mailingIsEmpty = computed<boolean>(() => {
+  return !Object.keys(mailing).length;
+});
+
+// data
+const mailing = reactive<any>({});
+
+// methods
+function treat(schedule: ISchedule): void {
+  emit("treat", schedule);
+}
+async function change(tab: string, schedule: ISchedule): Promise<void> {
+  if (tab !== "mailing") return;
+
+  if (mailing[schedule.cardID]) return;
+
+  mailing[schedule.cardID] = await props.load(schedule);
+}
+</script>
+
+<style scoped></style>