From ac9fadf9223a3f503636357c6ee3d6a7f4710b40 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Tue, 16 Apr 2024 18:01:46 +0200
Subject: [PATCH] Some Changes in E-Mail Page

---
 components/InboxList.vue |  92 ++++++++++
 components/InboxMail.vue |  53 ++++++
 pages/email.vue          | 378 +++++++++++++++++++++++++++++++++------
 3 files changed, 466 insertions(+), 57 deletions(-)
 create mode 100644 components/InboxList.vue
 create mode 100644 components/InboxMail.vue

diff --git a/components/InboxList.vue b/components/InboxList.vue
new file mode 100644
index 0000000..04ab42b
--- /dev/null
+++ b/components/InboxList.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { format, isToday } from 'date-fns'
+
+const props = defineProps({
+  modelValue: {
+    type: Object ,
+    default: null
+  },
+  mails: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mailsRefs = ref<Element[]>([])
+
+const selectedMail = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: Mail | null) {
+    emit('update:modelValue', value)
+  }
+})
+
+watch(selectedMail, () => {
+  if (!selectedMail.value) {
+    return
+  }
+
+  const ref = mailsRefs.value[selectedMail.value.id]
+  if (ref) {
+    ref.scrollIntoView({ block: 'nearest' })
+  }
+})
+
+defineShortcuts({
+  arrowdown: () => {
+    const index = props.mails.findIndex((mail) => mail.id === selectedMail.value?.id)
+
+    if (index === -1) {
+      selectedMail.value = props.mails[0]
+    } else if (index < props.mails.length - 1) {
+      selectedMail.value = props.mails[index + 1]
+    }
+  },
+  arrowup: () => {
+    const index = props.mails.findIndex((mail) => mail.id === selectedMail.value?.id)
+
+    if (index === -1) {
+      selectedMail.value = props.mails[props.mails.length - 1]
+    } else if (index > 0) {
+      selectedMail.value = props.mails[index - 1]
+    }
+  }
+})
+</script>
+
+<template>
+  <UDashboardPanelContent class="p-0">
+    <div v-for="(mail, index) in mails" :key="index" :ref="el => { mailsRefs[mail.id] = el as Element }">
+      <div
+          class="p-4 text-sm cursor-pointer border-l-2"
+          :class="[
+          mail.unread ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-300',
+          selectedMail && selectedMail.id === mail.id ? 'border-primary-500 dark:border-primary-400 bg-primary-100 dark:bg-primary-900/25' : 'border-white dark:border-gray-900 hover:border-primary-500/25 dark:hover:border-primary-400/25 hover:bg-primary-100/50 dark:hover:bg-primary-900/10'
+        ]"
+          @click="selectedMail = mail"
+      >
+        <div class="flex items-center justify-between" :class="[mail.unread && 'font-semibold']">
+          <div class="flex items-center gap-3">
+            {{ mail.from.name }}
+
+            <UChip v-if="mail.unread" />
+          </div>
+
+          <span>{{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}</span>
+        </div>
+        <p :class="[mail.unread && 'font-semibold']">
+          {{ mail.subject }}
+        </p>
+        <p class="text-gray-400 dark:text-gray-500 line-clamp-1">
+          {{ mail.body }}
+        </p>
+      </div>
+
+      <UDivider />
+    </div>
+  </UDashboardPanelContent>
+</template>
\ No newline at end of file
diff --git a/components/InboxMail.vue b/components/InboxMail.vue
new file mode 100644
index 0000000..fcf7314
--- /dev/null
+++ b/components/InboxMail.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { format, isToday } from 'date-fns'
+
+defineProps({
+  mail: {
+    type: Object,
+    required: true
+  },
+  selected: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <UDashboardPanelContent>
+    <div class="flex justify-between">
+      <div class="flex items-center gap-4">
+        <UAvatar v-bind="mail.from.avatar" :alt="mail.from.name" size="lg" />
+
+        <div class="min-w-0">
+          <p class="text-gray-900 dark:text-white font-semibold">
+            {{ mail.from.name }}
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 font-medium">
+            {{ mail.subject }}
+          </p>
+        </div>
+      </div>
+
+      <p class="font-medium text-gray-900 dark:text-white">
+        {{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}
+      </p>
+    </div>
+
+    <UDivider class="my-5" />
+
+    <div class="flex-1">
+      <p class="text-lg">
+        {{ mail.body }}
+      </p>
+    </div>
+
+    <UDivider class="my-5" />
+
+    <form @submit.prevent>
+      <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">
+        <UButton type="submit" color="black" label="Send" icon="i-heroicons-paper-airplane" class="absolute bottom-2.5 right-3.5" />
+      </UTextarea>
+    </form>
+  </UDashboardPanelContent>
+</template>
\ No newline at end of file
diff --git a/pages/email.vue b/pages/email.vue
index 106ec80..53038bb 100644
--- a/pages/email.vue
+++ b/pages/email.vue
@@ -1,5 +1,7 @@
 <script setup>
 import axios from 'axios'
+import {sub} from 'date-fns'
+
 const dataStore = useDataStore()
 const accounts = ref([])
 
@@ -132,11 +134,257 @@ const downloadAttachment = async (attachment) => {
 
 
 setup()
+
+const selectedTab = ref(0)
+
+const mails = ref([{
+  id: 1,
+  from: {
+    name: 'Alex Smith',
+    email: 'alex.smith@example.com',
+    avatar: {
+      src: 'https://i.pravatar.cc/128?u=1'
+    }
+  },
+  subject: 'Meeting Schedule',
+  body: 'Hi there, just a quick reminder about our meeting scheduled for 10 AM tomorrow. We\'ll be discussing the new marketing strategies and I would really appreciate your input on the matter. Looking forward to a productive session.',
+  date: new Date().toISOString()
+}, {
+  id: 2,
+  unread: true,
+  from: {
+    name: 'Jordan Brown',
+    email: 'jordan.brown@example.com',
+    avatar: {
+      src: 'https://i.pravatar.cc/128?u=2'
+    }
+  },
+  subject: 'Project Update',
+  body: 'I wanted to provide you with the latest update on the project. We\'ve made significant progress on the development front and I\'ve attached a detailed report for your review. Please let me know your thoughts and any areas for improvement.',
+  date: sub(new Date(), { minutes: 7 }).toISOString()
+}, {
+  id: 3,
+  unread: true,
+  from: {
+    name: 'Taylor Green',
+    email: 'taylor.green@example.com',
+    avatar: {
+      src: 'https://i.pravatar.cc/128?u=3'
+    }
+  },
+  subject: 'Lunch Plans',
+  body: 'Hey! I was wondering if you would like to grab lunch this Friday. I know a great spot downtown that serves the best Mexican cuisine. It would be a great opportunity for us to catch up and discuss the upcoming team event.',
+  date: sub(new Date(), { hours: 3 }).toISOString()
+}, {
+  id: 4,
+  from: {
+    name: 'Morgan White',
+    email: 'morgan.white@example.com',
+    avatar: {
+      src: 'https://i.pravatar.cc/128?u=4'
+    }
+  },
+  subject: 'New Proposal',
+  body: 'I\'ve attached the new proposal for our next project. It outlines all the objectives, timelines, and resource allocations. I\'m particularly excited about the innovative approach we\'re taking this time. Please have a look and let me know your thoughts.',
+  date: sub(new Date(), { days: 1 }).toISOString()
+}, {
+  id: 5,
+  from: {
+    name: 'Casey Gray',
+    email: 'casey.gray@example.com'
+  },
+  subject: 'Travel Itinerary',
+  body: 'Your travel itinerary for the upcoming business trip is ready. I\'ve included all flight details, hotel reservations, and meeting schedules. Please review and let me know if there are any changes you would like to make or any additional arrangements needed.',
+  date: sub(new Date(), { days: 1 }).toISOString()
+}, {
+  id: 6,
+  from: {
+    name: 'Jamie Johnson',
+    email: 'jamie.johnson@example.com'
+  },
+  subject: 'Budget Report',
+  body: 'I\'ve completed the budget report for this quarter. It includes a detailed analysis of our expenditures and revenue, along with projections for the next quarter. I believe there are some areas where we can optimize our spending. Let\'s discuss this in our next finance meeting.',
+  date: sub(new Date(), { days: 2 }).toISOString()
+}, {
+  id: 7,
+  from: {
+    name: 'Riley Davis',
+    email: 'riley.davis@example.com',
+    avatar: {
+      src: 'https://i.pravatar.cc/128?u=7'
+    }
+  },
+  subject: 'Training Session',
+  body: 'Just a reminder about the training session scheduled for next week. We\'ll be covering new software tools that are crucial for our workflow. It\'s important that everyone attends as this will greatly enhance our team\'s efficiency. Please confirm your availability.',
+  date: sub(new Date(), { days: 2 }).toISOString()
+}, {
+  id: 8,
+  unread: true,
+  from: {
+    name: 'Kelly Wilson',
+    email: 'kelly.wilson@example.com',
+    avatar: {
+      src: 'https://i.pravatar.cc/128?u=8'
+    }
+  },
+  subject: 'Happy Birthday!',
+  body: 'Happy Birthday! Wishing you a fantastic day filled with joy and laughter. Your dedication and hard work throughout the year have been invaluable to our team. Enjoy your day to the fullest!',
+  date: sub(new Date(), { days: 2 }).toISOString()
+}, {
+  id: 9,
+  from: {
+    name: 'Drew Moore',
+    email: 'drew.moore@example.com'
+  },
+  subject: 'Website Feedback',
+  body: 'We are in the process of revamping our company website and I would greatly appreciate your feedback on the new design. Your perspective is always insightful and could help us enhance the user experience significantly. Please let me know a convenient time for you to discuss this.',
+  date: sub(new Date(), { days: 5 }).toISOString()
+}, {
+  id: 10,
+  from: {
+    name: 'Jordan Taylor',
+    email: 'jordan.taylor@example.com'
+  },
+  subject: 'Gym Membership',
+  body: 'This is a friendly reminder that your gym membership is due for renewal at the end of this month. We\'ve added several new classes and facilities that I think you\'ll really enjoy. Let me know if you would like a tour of the new facilities.',
+  date: sub(new Date(), { days: 5 }).toISOString()
+}, {
+  id: 11,
+  unread: true,
+  from: {
+    name: 'Morgan Anderson',
+    email: 'morgan.anderson@example.com'
+  },
+  subject: 'Insurance Policy',
+  body: 'I\'m writing to inform you that your insurance policy details have been updated. The new document outlines the changes in coverage and premium rates. It\'s important to review these changes to ensure they meet your needs. Please don\'t hesitate to contact me if you have any questions.',
+  date: sub(new Date(), { days: 12 }).toISOString()
+}, {
+  id: 12,
+  from: {
+    name: 'Casey Thomas',
+    email: 'casey.thomas@example.com'
+  },
+  subject: 'Book Club Meeting',
+  body: 'I\'m excited to remind you about our next book club meeting scheduled for next Thursday. We\'ll be discussing \'The Great Gatsby,\' and I\'m looking forward to hearing everyone\'s perspectives. Also, we will be choosing our next book, so bring your suggestions!',
+  date: sub(new Date(), { months: 1 }).toISOString()
+}, {
+  id: 13,
+  from: {
+    name: 'Jamie Jackson',
+    email: 'jamie.jackson@example.com'
+  },
+  subject: 'Recipe Exchange',
+  body: 'Don\'t forget to send in your favorite recipe for our upcoming recipe exchange. It\'s a great opportunity to share and discover new and delicious meals. I\'m particularly excited to try out new dishes and add some variety to my cooking.',
+  date: sub(new Date(), { months: 1 }).toISOString()
+}, {
+  id: 14,
+  from: {
+    name: 'Riley White',
+    email: 'riley.white@example.com'
+  },
+  subject: 'Yoga Class Schedule',
+  body: 'The new schedule for yoga classes is now available. We\'ve added some new styles and adjusted the timings to accommodate more participants. I believe these classes are a great way to relieve stress and stay healthy. Hope to see you there!',
+  date: sub(new Date(), { months: 1 }).toISOString()
+}, {
+  id: 15,
+  from: {
+    name: 'Kelly Harris',
+    email: 'kelly.harris@example.com'
+  },
+  subject: 'Book Launch Event',
+  body: 'I\'m thrilled to invite you to my book launch event next month. It\'s been a journey writing this book    and I\'m eager to share it with you. The event will include a reading session, Q&A, and a signing opportunity. Your support would mean a lot to me.',
+  date: sub(new Date(), { months: 1 }).toISOString()
+}, {
+  id: 16,
+  from: {
+    name: 'Drew Martin',
+    email: 'drew.martin@example.com'
+  },
+  subject: 'Tech Conference',
+  body: 'Join us at the upcoming tech conference where we will be discussing the latest trends and innovations in technology. This is a great opportunity to network with industry leaders and learn about cutting-edge developments. Your participation would greatly contribute to our team\'s knowledge and growth.',
+  date: sub(new Date(), { months: 1, days: 4 }).toISOString()
+}, {
+  id: 17,
+  from: {
+    name: 'Alex Thompson',
+    email: 'alex.thompson@example.com'
+  },
+  subject: 'Art Exhibition',
+  body: 'I wanted to invite you to check out the new art exhibition this weekend. It features some amazing contemporary artists and their latest works. It\'s a great opportunity to immerse yourself in the local art scene and get inspired. Let me know if you\'re interested in going together.',
+  date: sub(new Date(), { months: 1, days: 15 }).toISOString()
+}, {
+  id: 18,
+  from: {
+    name: 'Jordan Garcia',
+    email: 'jordan.garcia@example.com'
+  },
+  subject: 'Networking Event',
+  body: 'I\'m looking forward to seeing you at the networking event next week. It\'s a great chance to connect with professionals from various industries and expand our professional network. There will also be guest speakers discussing key business trends. Your presence would add great value to the discussions.',
+  date: sub(new Date(), { months: 1, days: 18 }).toISOString()
+}, {
+  id: 19,
+  from: {
+    name: 'Taylor Rodriguez',
+    email: 'taylor.rodriguez@example.com'
+  },
+  subject: 'Volunteer Opportunity',
+  body: 'We\'re looking for volunteers for the upcoming community event. It\'s a great opportunity to give back and make a positive impact. There are various roles available, so you can choose something that aligns with your interests and skills. Let me know if you\'re interested and I\'ll provide more details.',
+  date: sub(new Date(), { months: 1, days: 25 }).toISOString()
+}, {
+  id: 20,
+  from: {
+    name: 'Morgan Lopez',
+    email: 'morgan.lopez@example.com'
+  },
+  subject: 'Car Service Reminder',
+  body: 'Just a reminder that your car is due for service next week. Regular maintenance is important to ensure your vehicle\'s longevity and performance. I\'ve included the details of the service center and the recommended services in this email. Feel free to contact them directly to schedule an appointment.',
+  date: sub(new Date(), { months: 2 }).toISOString()
+}])
+
+const dropdownItems = [[{
+  label: 'Mark as unread',
+  icon: 'i-heroicons-check-circle'
+}, {
+  label: 'Mark as important',
+  icon: 'i-heroicons-exclamation-circle'
+}], [{
+  label: 'Star thread',
+  icon: 'i-heroicons-star'
+}, {
+  label: 'Mute thread',
+  icon: 'i-heroicons-pause-circle'
+}]]
+
+// Filter mails based on the selected tab
+const filteredMails = computed(() => {
+  if (selectedTab.value === 1) {
+    return mails.value.filter(mail => !!mail.unread)
+  } else {
+    return mails.value
+  }
+
+
+})
+
+const selectedMail = ref(null)
+
+const isMailPanelOpen = computed({
+  get () {
+    return !!selectedMail.value
+  },
+  set (value) {
+    if (!value) {
+      selectedMail.value = null
+    }
+  }
+})
+
+
 </script>
 
 <template>
 
-  <div class="flex flex-row">
+<!--  <div class="flex flex-row">
     <div id="mailboxlist">
       <UAccordion
         :items="accounts"
@@ -214,14 +462,14 @@ setup()
 
     <div id="mailcontent" v-if="selectedMessage">
       <Toolbar>
-        <!--<UButton
+        &lt;!&ndash;<UButton
             @click="setup"
         >Setup</UButton>
         <UButton>+ Neu</UButton>
         <UButton>Sync</UButton>
         <UButton>Papierkorb</UButton>
         <UButton>Weiterleiten</UButton>
-        <UButton>Antworten</UButton>-->
+        <UButton>Antworten</UButton>&ndash;&gt;
         <UButton
           @click="setSeen(false,selectedMessage)"
         >
@@ -254,63 +502,79 @@ setup()
         {{messageText}}
       </pre>
     </div>
-  </div>
+  </div>-->
+
+  <UDashboardPanel id="inbox" :width="400" :resizable="{ min: 300, max: 500 }">
+    <UDashboardNavbar title="Inbox" >
+      <template #right>
+        <UTabs v-model="selectedTab" :items="[{label: 'Alle'},{label: 'Ungelesen'}]" :ui="{ wrapper: '', list: { height: 'h-9', tab: { height: 'h-7', size: 'text-[13px]' } } }" />
+      </template>
+    </UDashboardNavbar>
+
+    <!-- ~/components/inbox/InboxList.vue -->
+    <InboxList v-model="selectedMail" :mails="filteredMails" />
+  </UDashboardPanel>
+
+  <UDashboardPanel v-model="isMailPanelOpen" collapsible grow side="right">
+    <template v-if="selectedMail">
+      <UDashboardNavbar>
+        <template #toggle>
+          <UDashboardNavbarToggle icon="i-heroicons-x-mark" />
+
+          <UDivider orientation="vertical" class="mx-1.5 lg:hidden" />
+        </template>
+
+        <template #left>
+          <UTooltip text="Archive">
+            <UButton icon="i-heroicons-archive-box" color="gray" variant="ghost" />
+          </UTooltip>
+
+          <UTooltip text="Move to junk">
+            <UButton icon="i-heroicons-archive-box-x-mark" color="gray" variant="ghost" />
+          </UTooltip>
+
+<!--          <UDivider orientation="vertical" class="mx-1.5" />-->
+
+<!--          <UPopover :popper="{ placement: 'bottom-start' }">
+            <template #default="{ open }">
+              <UTooltip text="Snooze" :prevent="open">
+                <UButton icon="i-heroicons-clock" color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" />
+              </UTooltip>
+            </template>
+
+            <template #panel="{ close }">
+              <DatePicker @close="close" />
+            </template>
+          </UPopover>-->
+        </template>
+
+        <template #right>
+          <UTooltip text="Reply">
+            <UButton icon="i-heroicons-arrow-uturn-left" color="gray" variant="ghost" />
+          </UTooltip>
+
+          <UTooltip text="Forward">
+            <UButton icon="i-heroicons-arrow-uturn-right" color="gray" variant="ghost" />
+          </UTooltip>
+
+          <UDivider orientation="vertical" class="mx-1.5" />
+
+          <UDropdown :items="dropdownItems">
+            <UButton icon="i-heroicons-ellipsis-vertical" color="gray" variant="ghost" />
+          </UDropdown>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- ~/components/inbox/InboxMail.vue -->
+      <InboxMail :mail="selectedMail" />
+    </template>
+    <div v-else class="flex-1 hidden lg:flex items-center justify-center">
+      <UIcon name="i-heroicons-inbox" class="w-32 h-32 text-gray-400 dark:text-gray-500" />
+    </div>
+  </UDashboardPanel>
 
 </template>
 
 <style scoped>
-.maiLDivider {
-  width: 5vw;
-}
 
-#mailboxlist {
-  width: 15vw;
-  height: 95vh;
-  overflow-y: scroll;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-#mailboxlist::-webkit-scrollbar {
-  display: none;
-}
-
-#maillist {
-  width: 25vw;
-  height: 88vh;
-  overflow-y:scroll;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-#maillist::-webkit-scrollbar {
-  display: none;
-}
-
-#mailcontent {
-  width: 55vw;
-  height: 88vh;
-  overflow-y:scroll;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-#mailcontent::-webkit-scrollbar {
-  display: none;
-}
-
-.message {
-  //border: 1px solid  #69c350;
-  margin-right: 1em;
-  padding: 0.5em;
-}
-
-
-.message:hover {
-  background-color: #69c350;
-}
-
-.message h1 {
-  font-weight: bold;
-}
 </style>
\ No newline at end of file