feat: initial commit - Band Management application

resources/vuexy-admin-v10.11.1/nuxt-version/javascript-version/full-version/views/apps/email/ComposeDialog.vue

@@ -0,0 +1,250 @@
+<script setup>
+const emit = defineEmits(['close'])
+
+const content = ref('')
+const to = ref('')
+const subject = ref('')
+const message = ref('')
+const cc = ref('')
+const bcc = ref('')
+const isEmailCc = ref(false)
+const isEmailBcc = ref(false)
+
+const resetValues = () => {
+  to.value = subject.value = message.value = ''
+}
+</script>
+
+<template>
+  <VCard
+    class="email-compose-dialog"
+    elevation="10"
+    max-width="30vw"
+  >
+    <VCardItem class="py-3 px-6">
+      <div class="d-flex align-center">
+        <h5 class="text-h5">
+          Compose Mail
+        </h5>
+        <VSpacer />
+
+        <div class="d-flex align-center gap-x-2">
+          <IconBtn
+            size="small"
+            icon="tabler-minus"
+            @click="$emit('close')"
+          />
+          <IconBtn
+            size="small"
+            icon="tabler-x"
+            @click="$emit('close'); resetValues(); isEmailCc = false; isEmailBcc = false;"
+          />
+        </div>
+      </div>
+    </VCardItem>
+
+    <div class="px-1 pe-6 py-1">
+      <VTextField
+        :id="useId()"
+        v-model="to"
+        density="compact"
+      >
+        <template #prepend-inner>
+          <div class="text-base font-weight-medium text-disabled">
+            To:
+          </div>
+        </template>
+        <template #append>
+          <span class="cursor-pointer">
+            <span @click="isEmailCc = !isEmailCc">Cc</span>
+            <span> | </span>
+            <span @click="isEmailBcc = !isEmailBcc">Bcc</span>
+          </span>
+        </template>
+      </VTextField>
+    </div>
+
+    <VExpandTransition>
+      <div v-if="isEmailCc">
+        <VDivider />
+
+        <div class="px-1 pe-6 py-1">
+          <VTextField
+            :id="useId()"
+            v-model="cc"
+            density="compact"
+          >
+            <template #prepend-inner>
+              <div class="text-disabled font-weight-medium">
+                Cc:
+              </div>
+            </template>
+          </VTextField>
+        </div>
+      </div>
+    </VExpandTransition>
+
+    <VExpandTransition>
+      <div v-if="isEmailBcc">
+        <VDivider />
+
+        <div class="px-1 pe-6 py-1">
+          <VTextField
+            :id="useId()"
+            v-model="bcc"
+            density="compact"
+          >
+            <template #prepend-inner>
+              <div class="text-disabled font-weight-medium">
+                Bcc:
+              </div>
+            </template>
+          </VTextField>
+        </div>
+      </div>
+    </VExpandTransition>
+
+    <VDivider />
+    <div class="px-1 pe-6 py-1">
+      <VTextField
+        :id="useId()"
+        v-model="subject"
+        density="compact"
+      >
+        <template #prepend-inner>
+          <div class="text-base font-weight-medium text-disabled">
+            Subject:
+          </div>
+        </template>
+      </VTextField>
+    </div>
+
+    <VDivider />
+
+    <!-- 👉 Tiptap Editor  -->
+    <TiptapEditor
+      v-model="content"
+      placeholder="Message"
+    />
+
+    <div class="d-flex align-center px-6 py-4">
+      <VBtn
+        color="primary"
+        class="me-4"
+        append-icon="tabler-send"
+        :disabled="to === '' ? true : false"
+        @click="$emit('close'); content = ''; resetValues(); isEmailCc = false; isEmailBcc = false;"
+      >
+        send
+      </VBtn>
+
+      <IconBtn size="small">
+        <VIcon icon="tabler-paperclip" />
+      </IconBtn>
+
+      <VSpacer />
+
+      <IconBtn
+        size="small"
+        class="me-2"
+      >
+        <VIcon icon="tabler-dots-vertical" />
+      </IconBtn>
+
+      <IconBtn
+        size="small"
+        @click="$emit('close'); resetValues(); content = ''; isEmailCc = false; isEmailBcc = false;"
+      >
+        <VIcon icon="tabler-trash" />
+      </IconBtn>
+    </div>
+  </VCard>
+</template>
+
+<style lang="scss">
+@use "@core/scss/base/mixins";
+
+.v-card.email-compose-dialog {
+  z-index: 910 !important;
+
+  @include mixins.elevation(18);
+
+  .v-field--prepended {
+    padding-inline-start: 20px;
+  }
+
+  .v-field__prepend-inner {
+    align-items: center;
+    padding: 0;
+  }
+
+  .v-field__prepend-inner {
+    align-items: center;
+    padding: 0;
+  }
+
+  .v-card-item {
+    background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+  }
+
+  .v-textarea .v-field {
+    --v-field-padding-start: 20px;
+  }
+
+  .v-field__outline {
+    display: none;
+  }
+
+  .v-input {
+    .v-field__prepend-inner {
+      display: flex;
+      align-items: center;
+      padding-block-start: 0;
+    }
+  }
+
+  .app-text-field {
+    .v-field__input {
+      padding-block-start: 6px;
+    }
+
+    .v-field--focused {
+      box-shadow: none !important;
+    }
+  }
+}
+
+.email-compose-dialog {
+  .ProseMirror {
+    p {
+      margin-block-end: 0;
+    }
+
+    padding: 1.5rem;
+    block-size: 100px;
+    overflow-y: auto;
+    padding-block: 0.5rem;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    p.is-editor-empty:first-child::before {
+      block-size: 0;
+      color: #adb5bd;
+      content: attr(data-placeholder);
+      float: inline-start;
+      pointer-events: none;
+    }
+
+    ul,
+    ol {
+      padding-inline: 1.125rem;
+    }
+
+    &-focused {
+      outline: none;
+    }
+  }
+}
+</style>

resources/vuexy-admin-v10.11.1/nuxt-version/javascript-version/full-version/views/apps/email/EmailLeftSidebarContent.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+
+const props = defineProps({
+  emailsMeta: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['toggleComposeDialogVisibility'])
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const inboxEmails = ref(0)
+const draftEmails = ref(0)
+const spamEmails = ref(0)
+const starredEmails = ref(0)
+
+watch(() => props.emailsMeta, emailsMeta => {
+  if (!emailsMeta)
+    return
+  inboxEmails.value = emailsMeta.inbox
+  draftEmails.value = emailsMeta.draft
+  spamEmails.value = emailsMeta.spam
+  starredEmails.value = emailsMeta.star
+}, {
+  immediate: true,
+  deep: true,
+})
+
+const folders = computed(() => [
+  {
+    title: 'Inbox',
+    prependIcon: 'tabler-mail',
+    to: { name: 'apps-email' },
+    badge: {
+      content: inboxEmails.value,
+      color: 'primary',
+    },
+  },
+  {
+    title: 'Sent',
+    prependIcon: 'tabler-send',
+    to: {
+      name: 'apps-email-filter',
+      params: { filter: 'sent' },
+    },
+  },
+  {
+    title: 'Draft',
+    prependIcon: 'tabler-edit',
+    to: {
+      name: 'apps-email-filter',
+      params: { filter: 'draft' },
+    },
+    badge: {
+      content: draftEmails.value,
+      color: 'warning',
+    },
+  },
+  {
+    title: 'Starred',
+    prependIcon: 'tabler-star',
+    to: {
+      name: 'apps-email-filter',
+      params: { filter: 'starred' },
+    },
+    badge: {
+      content: starredEmails.value,
+      color: 'success',
+    },
+  },
+  {
+    title: 'Spam',
+    prependIcon: 'tabler-alert-circle',
+    to: {
+      name: 'apps-email-filter',
+      params: { filter: 'spam' },
+    },
+    badge: {
+      content: spamEmails.value,
+      color: 'error',
+    },
+  },
+  {
+    title: 'Trash',
+    prependIcon: 'tabler-trash',
+    to: {
+      name: 'apps-email-filter',
+      params: { filter: 'trashed' },
+    },
+  },
+])
+
+const labels = [
+  {
+    title: 'Personal',
+    color: 'success',
+    to: {
+      name: 'apps-email-label',
+      params: { label: 'personal' },
+    },
+  },
+  {
+    title: 'Company',
+    color: 'primary',
+    to: {
+      name: 'apps-email-label',
+      params: { label: 'company' },
+    },
+  },
+  {
+    title: 'Important',
+    color: 'warning',
+    to: {
+      name: 'apps-email-label',
+      params: { label: 'important' },
+    },
+  },
+  {
+    title: 'Private',
+    color: 'error',
+    to: {
+      name: 'apps-email-label',
+      params: { label: 'private' },
+    },
+  },
+]
+</script>
+
+<template>
+  <div class="d-flex flex-column h-100">
+    <!-- 👉 Compose -->
+    <div class="px-6 pb-5 pt-6">
+      <VBtn
+        block
+        @click="$emit('toggleComposeDialogVisibility')"
+      >
+        Compose
+      </VBtn>
+    </div>
+
+    <!-- 👉 Folders -->
+    <PerfectScrollbar
+      :options="{ wheelPropagation: false }"
+      class="h-100"
+    >
+      <!-- Filters -->
+      <ul class="email-filters py-4">
+        <NuxtLink
+          v-for="folder in folders"
+          :key="folder.title"
+          v-slot="{ isActive, href, navigate }"
+          class="d-flex align-center cursor-pointer align-center"
+          :to="folder.to"
+          custom
+        >
+          <li
+            v-bind="$attrs"
+            :href="href"
+            :class="isActive && 'email-filter-active text-primary'"
+            class="d-flex align-center cursor-pointer"
+            @click="navigate"
+          >
+            <VIcon
+              :icon="folder.prependIcon"
+              class="me-2"
+              size="20"
+            />
+            <div class="text-base">
+              {{ folder.title }}
+            </div>
+
+            <VSpacer />
+
+            <VChip
+              v-if="folder.badge?.content"
+              :color="folder.badge.color"
+              label
+              size="small"
+              class="rounded-xl px-3"
+            >
+              {{ folder.badge?.content }}
+            </VChip>
+          </li>
+        </NuxtLink>
+      </ul>
+
+      <ul class="email-labels py-4">
+        <!-- 👉 Labels -->
+        <div class="text-caption text-disabled mb-4 px-6">
+          LABELS
+        </div>
+        <NuxtLink
+          v-for="label in labels"
+          :key="label.title"
+          v-slot="{ isActive, href, navigate }"
+          class="d-flex align-center"
+          :to="label.to"
+          custom
+        >
+          <li
+            v-bind="$attrs"
+            :href="href"
+            :class="isActive && 'email-label-active text-primary'"
+            class="cursor-pointer d-flex align-center"
+            @click="navigate"
+          >
+            <VIcon
+              icon="tabler-circle-filled"
+              :color="label.color"
+              class="me-2"
+              size="12"
+            />
+            <div class="text-body-1 text-high-emphasis">
+              {{ label.title }}
+            </div>
+          </li>
+        </NuxtLink>
+      </ul>
+    </PerfectScrollbar>
+  </div>
+</template>
+
+<style lang="scss">
+.email-filters,
+.email-labels {
+  .email-filter-active,
+  .email-label-active {
+    &::after {
+      position: absolute;
+      background: currentcolor;
+      block-size: 100%;
+      content: "";
+      inline-size: 3px;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+    }
+  }
+}
+
+.email-filters {
+  > li {
+    position: relative;
+    margin-block-end: 4px;
+    padding-block: 4px;
+    padding-inline: 24px;
+  }
+}
+
+.email-labels {
+  > li {
+    position: relative;
+    margin-block-end: 0.75rem;
+    padding-inline: 24px;
+  }
+}
+</style>

resources/vuexy-admin-v10.11.1/nuxt-version/javascript-version/full-version/views/apps/email/EmailView.vue

@@ -0,0 +1,432 @@
+<script setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import { useEmail } from '@/views/apps/email/useEmail'
+
+const props = defineProps({
+  email: {
+    type: null,
+    required: true,
+  },
+  emailMeta: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits([
+  'refresh',
+  'navigated',
+  'close',
+  'trash',
+  'unread',
+  'read',
+  'star',
+  'unstar',
+])
+
+const emailReply = ref('')
+const showReplyBox = ref(false)
+const showReplyCard = ref(true)
+const { updateEmailLabels } = useEmail()
+const { labels, resolveLabelColor, emailMoveToFolderActions, shallShowMoveToActionFor, moveSelectedEmailTo } = useEmail()
+
+const handleMoveMailsTo = async action => {
+  await moveSelectedEmailTo(action, [props.email.id])
+  emit('refresh')
+  emit('close')
+}
+
+const updateMailLabel = async label => {
+  await updateEmailLabels([props.email.id], label)
+  emit('refresh')
+}
+</script>
+
+<template>
+  <!-- ℹ️ calc(100% - 256px) => 265px is left sidebar width -->
+  <VNavigationDrawer
+    data-allow-mismatch
+    temporary
+    :model-value="!!props.email"
+    location="right"
+    :scrim="false"
+    floating
+    class="email-view"
+  >
+    <template v-if="props.email">
+      <!-- 👉 header -->
+
+      <div class="email-view-header d-flex align-center px-5 py-3">
+        <IconBtn
+          class="me-2"
+          @click="$emit('close'); showReplyBox = false; showReplyCard = true; emailReply = ''"
+        >
+          <VIcon
+            size="22"
+            icon="tabler-chevron-left"
+            class="flip-in-rtl"
+          />
+        </IconBtn>
+
+        <div class="d-flex align-center flex-wrap flex-grow-1 overflow-hidden gap-2">
+          <div class="text-body-1 text-high-emphasis text-truncate">
+            {{ props.email.subject }}
+          </div>
+
+          <div class="d-flex flex-wrap gap-2">
+            <VChip
+              v-for="label in props.email.labels"
+              :key="label"
+              :color="resolveLabelColor(label)"
+              class="text-capitalize flex-shrink-0"
+              size="small"
+              :label="false"
+            >
+              {{ label }}
+            </VChip>
+          </div>
+        </div>
+
+        <div>
+          <div class="d-flex align-center">
+            <IconBtn
+              :disabled="!props.emailMeta.hasPreviousEmail"
+              @click="$emit('navigated', 'previous')"
+            >
+              <VIcon
+                icon="tabler-chevron-left"
+                class="flip-in-rtl"
+              />
+            </IconBtn>
+
+            <IconBtn
+              :disabled="!props.emailMeta.hasNextEmail"
+              @click="$emit('navigated', 'next')"
+            >
+              <VIcon
+                icon="tabler-chevron-right"
+                class="flip-in-rtl"
+              />
+            </IconBtn>
+          </div>
+        </div>
+      </div>
+
+      <VDivider />
+
+      <!-- 👉 Action bar -->
+      <div class="email-view-action-bar d-flex align-center text-medium-emphasis px-6 gap-x-1">
+        <!-- Trash -->
+        <IconBtn
+          v-show="!props.email.isDeleted"
+          @click="$emit('trash'); $emit('close')"
+        >
+          <VIcon
+            icon="tabler-trash"
+            size="22"
+          />
+          <VTooltip
+            activator="parent"
+            location="top"
+          >
+            Delete Mail
+          </VTooltip>
+        </IconBtn>
+
+        <!-- Read/Unread -->
+        <IconBtn @click.stop="$emit('unread'); $emit('close')">
+          <VIcon
+            icon="tabler-mail"
+            size="22"
+          />
+          <VTooltip
+            activator="parent"
+            location="top"
+          >
+            Mark as Unread
+          </VTooltip>
+        </IconBtn>
+
+        <!-- Move to folder -->
+        <IconBtn>
+          <VIcon
+            icon="tabler-folder"
+            size="22"
+          />
+          <VTooltip
+            activator="parent"
+            location="top"
+          >
+            Move to
+          </VTooltip>
+
+          <VMenu activator="parent">
+            <VList density="compact">
+              <template
+                v-for="moveTo in emailMoveToFolderActions"
+                :key="moveTo.title"
+              >
+                <VListItem
+                  :class="shallShowMoveToActionFor(moveTo.action) ? 'd-flex' : 'd-none'"
+                  class="align-center"
+                  href="#"
+                  @click="handleMoveMailsTo(moveTo.action)"
+                >
+                  <template #prepend>
+                    <VIcon
+                      :icon="moveTo.icon"
+                      class="me-2"
+                      size="20"
+                    />
+                  </template>
+                  <VListItemTitle class="text-capitalize">
+                    {{ moveTo.action }}
+                  </VListItemTitle>
+                </VListItem>
+              </template>
+            </VList>
+          </VMenu>
+        </IconBtn>
+
+        <!-- Update labels -->
+        <IconBtn>
+          <VIcon
+            icon="tabler-tag"
+            size="22"
+          />
+          <VTooltip
+            activator="parent"
+            location="top"
+          >
+            Label
+          </VTooltip>
+
+          <VMenu activator="parent">
+            <VList density="compact">
+              <VListItem
+                v-for="label in labels"
+                :key="label.title"
+                href="#"
+                @click.stop="updateMailLabel(label.title)"
+              >
+                <template #prepend>
+                  <VBadge
+                    inline
+                    :color="resolveLabelColor(label.title)"
+                    dot
+                  />
+                </template>
+                <VListItemTitle class="ms-2 text-capitalize">
+                  {{ label.title }}
+                </VListItemTitle>
+              </VListItem>
+            </VList>
+          </VMenu>
+        </IconBtn>
+
+        <VSpacer />
+
+        <div class="d-flex align-center gap-x-1">
+          <!-- Star/Unstar -->
+          <IconBtn
+            :color="props.email.isStarred ? 'warning' : 'default'"
+            @click="props.email?.isStarred ? $emit('unstar') : $emit('star'); $emit('refresh')"
+          >
+            <VIcon icon="tabler-star" />
+          </IconBtn>
+          <IconBtn>
+            <VIcon icon="tabler-dots-vertical" />
+          </IconBtn>
+        </div>
+      </div>
+
+      <VDivider />
+
+      <!-- 👉 Mail Content -->
+      <PerfectScrollbar
+        tag="div"
+        class="mail-content-container flex-grow-1 pa-sm-12 pa-6"
+        :options="{ wheelPropagation: false }"
+      >
+        <VCard class="mb-4">
+          <div class="d-flex align-start align-sm-center pa-6 gap-x-4">
+            <VAvatar size="38">
+              <VImg
+                :src="props.email.from.avatar"
+                :alt="props.email.from.name"
+              />
+            </VAvatar>
+
+            <div class="d-flex flex-wrap flex-grow-1 overflow-hidden">
+              <div class="text-truncate">
+                <div class="text-body-1 text-high-emphasis text-truncate">
+                  {{ props.email.from.name }}
+                </div>
+                <div class="text-sm">
+                  {{ props.email.from.email }}
+                </div>
+              </div>
+
+              <VSpacer />
+
+              <div class="d-flex align-center gap-x-4">
+                <div class="text-disabled text-base">
+                  {{ new Date(props.email.time).toDateString() }}
+                </div>
+                <div>
+                  <IconBtn v-show="props.email.attachments.length">
+                    <VIcon
+                      icon="tabler-paperclip"
+                      size="22"
+                    />
+                  </IconBtn>
+                  <IconBtn>
+                    <VIcon
+                      icon="tabler-dots-vertical"
+                      size="22"
+                    />
+                  </IconBtn>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <VDivider />
+
+          <VCardText>
+            <!-- eslint-disable vue/no-v-html -->
+            <div class="text-body-1 font-weight-medium text-truncate mb-4">
+              {{ props.email.from.name }},
+            </div>
+            <div
+              class="text-base"
+              v-html="props.email.message"
+            />
+            <!-- eslint-enable -->
+          </VCardText>
+
+          <template v-if="props.email.attachments.length">
+            <VDivider />
+
+            <VCardText class="d-flex flex-column gap-y-4 pt-4">
+              <span>2 Attachments</span>
+              <div
+                v-for="attachment in props.email.attachments"
+                :key="attachment.fileName"
+                class="d-flex align-center"
+              >
+                <VImg
+                  :src="attachment.thumbnail"
+                  :alt="attachment.fileName"
+                  aspect-ratio="1"
+                  max-height="24"
+                  max-width="24"
+                  class="me-2"
+                />
+                <span>{{ attachment.fileName }}</span>
+              </div>
+            </VCardText>
+          </template>
+        </VCard>
+
+        <!-- Reply or Forward -->
+        <VCard v-show="showReplyCard">
+          <VCardText class="font-weight-medium text-high-emphasis">
+            <div class="text-base">
+              Click here to <span
+                class="text-primary cursor-pointer"
+                @click="showReplyBox = !showReplyBox; showReplyCard = !showReplyCard"
+              >
+                Reply
+              </span> or <span class="text-primary cursor-pointer">
+                Forward
+              </span>
+            </div>
+          </VCardText>
+        </VCard>
+
+        <VCard v-if="showReplyBox">
+          <VCardText>
+            <h6 class="text-h6 mb-6">
+              Reply to {{ email?.from.name }}
+            </h6>
+            <TiptapEditor
+              v-model="emailReply"
+              placeholder="Write your message..."
+            />
+            <div class="d-flex justify-end gap-4 pt-2 flex-wrap">
+              <VBtn
+                icon
+                variant="text"
+                color="secondary"
+                @click="showReplyBox = !showReplyBox; showReplyCard = !showReplyCard; emailReply = ''"
+              >
+                <VIcon icon="tabler-trash" />
+              </VBtn>
+              <VBtn
+                variant="text"
+                color="secondary"
+              >
+                <template #prepend>
+                  <VIcon
+                    icon="tabler-paperclip"
+                    class="text-high-emphasis"
+                    size="16"
+                  />
+                </template>
+                Attachments
+              </VBtn>
+              <VBtn append-icon="tabler-send">
+                Send
+              </VBtn>
+            </div>
+          </VCardText>
+        </VCard>
+      </PerfectScrollbar>
+    </template>
+  </VNavigationDrawer>
+</template>
+
+<style lang="scss">
+.email-view {
+  &:not(.v-navigation-drawer--active) {
+    transform: translateX(110%) !important;
+  }
+
+  inline-size: 100% !important;
+
+  @media only screen and (min-width: 1280px) {
+    inline-size: calc(100% - 256px) !important;
+  }
+
+  .v-navigation-drawer__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor {
+    padding-block-start: 0 !important;
+    padding-inline: 0 !important;
+  }
+
+  .ProseMirror {
+    padding: 0.5rem;
+    block-size: 100px;
+    overflow-y: auto;
+    padding-block: 0.5rem;
+  }
+}
+
+.email-view-action-bar {
+  min-block-size: 56px;
+}
+
+.mail-content-container {
+  background-color: rgb(var(--v-theme-on-surface), var(--v-hover-opacity));
+
+  .mail-header {
+    margin-block: 12px;
+    margin-inline: 24px;
+  }
+}
+</style>

resources/vuexy-admin-v10.11.1/nuxt-version/javascript-version/full-version/views/apps/email/useEmail.js

@@ -0,0 +1,94 @@
+export const useEmail = () => {
+  const route = useRoute('apps-email-filter')
+
+  const updateEmails = async (ids, data) => {
+    await $api('apps/email', {
+      method: 'POST',
+      body: JSON.stringify({ ids, data }),
+    })
+  }
+
+  const updateEmailLabels = async (ids, label) => {
+    await $api('/apps/email', {
+      method: 'POST',
+      body: { ids, label },
+    })
+  }
+
+  const emailMoveToFolderActions = [
+    { action: 'inbox', icon: 'tabler-mail' },
+    { action: 'spam', icon: 'tabler-alert-octagon' },
+    { action: 'trash', icon: 'tabler-trash' },
+  ]
+
+  const labels = [
+    {
+      title: 'personal',
+      color: 'success',
+    },
+    {
+      title: 'company',
+      color: 'primary',
+    },
+    {
+      title: 'important',
+      color: 'warning',
+    },
+    {
+      title: 'private',
+      color: 'error',
+    },
+  ]
+
+  const resolveLabelColor = label => {
+    if (label === 'personal')
+      return 'success'
+    if (label === 'company')
+      return 'primary'
+    if (label === 'important')
+      return 'warning'
+    if (label === 'private')
+      return 'error'
+    
+    return 'secondary'
+  }
+
+  const shallShowMoveToActionFor = action => {
+    if (action === 'trash')
+      return route.params.filter !== 'trashed'
+    else if (action === 'inbox')
+      return !(route.params.filter === undefined || route.params.filter === 'sent' || route.params.filter === 'draft')
+    else if (action === 'spam')
+      return !(route.params.filter === 'spam' || route.params.filter === 'sent' || route.params.filter === 'draft')
+    
+    return false
+  }
+
+  const moveSelectedEmailTo = async (action, selectedEmails) => {
+    const dataToUpdate = {}
+    if (action === 'inbox') {
+      if (route.params.filter === 'trashed')
+        dataToUpdate.isDeleted = false
+      dataToUpdate.folder = 'inbox'
+    }
+    else if (action === 'spam') {
+      if (route.params.filter === 'trashed')
+        dataToUpdate.isDeleted = false
+      dataToUpdate.folder = 'spam'
+    }
+    else if (action === 'trash') {
+      dataToUpdate.isDeleted = true
+    }
+    await updateEmails(selectedEmails, dataToUpdate)
+  }
+
+  return {
+    labels,
+    resolveLabelColor,
+    shallShowMoveToActionFor,
+    emailMoveToFolderActions,
+    moveSelectedEmailTo,
+    updateEmails,
+    updateEmailLabels,
+  }
+}