matt/port-nimara-client-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile optimization

Browse Source
This commit is contained in:
Matt
2025-06-10 16:01:21 +02:00
parent 1030103b7a
commit 49aa47ab10
4 changed files with 380 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
components/ClientEmailSection.vue
View File

@@ -20,67 +20,90 @@
@click="showComposer = true"
color="primary"
variant="flat"
prepend-icon="mdi-email-edit"
:prepend-icon="!mobile ? 'mdi-email-edit' : undefined"
:icon="mobile ? 'mdi-email-edit' : undefined"
:size="mobile ? 'default' : 'default'"
>
Compose Email
<span v-if="!mobile">Compose Email</span>
</v-btn>
<v-btn
@click="loadEmailThread"
variant="text"
icon="mdi-refresh"
:loading="isRefreshing"
size="small"
:size="mobile ? 'small' : 'small'"
>
<v-tooltip activator="parent">Refresh Emails</v-tooltip>
</v-btn>
<v-spacer />
<v-btn
@click="reconnectEmail"
variant="text"
size="small"
prepend-icon="mdi-connection"
>
Reconnect
</v-btn>
<v-btn
@click="disconnectEmail"
variant="text"
size="small"
color="error"
prepend-icon="mdi-logout"
>
Disconnect
</v-btn>
<v-btn-group v-if="!mobile" variant="text" density="compact">
<v-btn
@click="reconnectEmail"
size="small"
prepend-icon="mdi-connection"
>
Reconnect
</v-btn>
<v-btn
@click="disconnectEmail"
size="small"
color="error"
prepend-icon="mdi-logout"
>
Disconnect
</v-btn>
</v-btn-group>
<v-menu v-else>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon="mdi-dots-vertical"
variant="text"
size="small"
/>
</template>
<v-list density="compact">
<v-list-item @click="reconnectEmail" prepend-icon="mdi-connection">
<v-list-item-title>Reconnect</v-list-item-title>
</v-list-item>
<v-list-item @click="disconnectEmail" prepend-icon="mdi-logout" base-color="error">
<v-list-item-title>Disconnect</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<!-- Email Thread List -->
<div v-if="emailThreads.length > 0" class="email-threads">
<div class="text-subtitle-1 mb-3">Email History</div>
<v-timeline side="end" density="comfortable">
<v-timeline :side="mobile ? 'end' : 'end'" :density="mobile ? 'compact' : 'comfortable'">
<v-timeline-item
v-for="(email, index) in emailThreads"
:key="index"
:dot-color="email.direction === 'sent' ? 'primary' : 'success'"
:icon="email.direction === 'sent' ? 'mdi-email-send' : 'mdi-email-receive'"
size="small"
:size="mobile ? 'x-small' : 'small'"
>
<template v-slot:opposite>
<template v-slot:opposite v-if="!mobile">
<div class="text-caption">
{{ formatDate(email.timestamp) }}
</div>
</template>
<v-card variant="outlined">
<v-card-subtitle class="d-flex align-center">
<v-card variant="outlined" :density="mobile ? 'compact' : 'default'">
<v-card-subtitle class="d-flex align-center justify-space-between">
<span class="text-body-2">
{{ email.direction === 'sent' ? 'To' : 'From' }}:
{{ email.direction === 'sent' ? email.to : email.from }}
</span>
<span v-if="mobile" class="text-caption text-grey">
{{ formatDate(email.timestamp) }}
</span>
</v-card-subtitle>
<v-card-text>
<v-card-text :class="mobile ? 'pa-3' : ''">
<div class="text-body-2 font-weight-medium mb-2">{{ email.subject }}</div>
<div class="email-content" v-html="formatEmailContent(email.content)"></div>
<div class="email-content" :class="mobile ? 'email-content-mobile' : ''" v-html="formatEmailContent(email.content)"></div>
<!-- Attachments -->
<div v-if="email.attachments && email.attachments.length > 0" class="mt-3">
@@ -111,8 +134,14 @@
</v-card-text>
<!-- Email Composer Dialog -->
<v-dialog v-model="showComposer" max-width="800" persistent>
<v-card>
<v-dialog
v-model="showComposer"
:max-width="mobile ? '100%' : '800'"
:fullscreen="mobile"
persistent
:transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
>
<v-card :max-height="mobile ? '100vh' : undefined">
<v-card-title class="d-flex align-center">
<v-icon class="mr-2">mdi-email-edit</v-icon>
Compose Email
@@ -139,32 +168,37 @@
v-model="emailDraft.subject"
label="Subject"
variant="outlined"
density="comfortable"
:density="mobile ? 'compact' : 'comfortable'"
class="mb-4"
/>
<!-- Quick Actions -->
<div class="mb-3">
<span class="text-body-2 mr-2">Quick Insert:</span>
<v-btn
v-if="hasEOI"
@click="insertEOILink"
size="small"
variant="tonal"
prepend-icon="mdi-file-document"
>
EOI Link
</v-btn>
<v-btn
v-if="hasBerth"
@click="insertBerthInfo"
size="small"
variant="tonal"
prepend-icon="mdi-anchor"
class="ml-2"
>
Berth Info
</v-btn>
<div class="mb-3" :class="mobile ? 'd-flex flex-column align-start' : ''">
<span class="text-body-2" :class="mobile ? 'mb-2' : 'mr-2'">Quick Insert:</span>
<div :class="mobile ? 'd-flex gap-2' : ''">
<v-btn
v-if="hasEOI"
@click="insertEOILink"
:size="mobile ? 'x-small' : 'small'"
variant="tonal"
:prepend-icon="mobile ? undefined : 'mdi-file-document'"
:class="!mobile ? '' : ''"
>
<v-icon v-if="mobile" size="small">mdi-file-document</v-icon>
EOI{{ mobile ? '' : ' Link' }}
</v-btn>
<v-btn
v-if="hasBerth"
@click="insertBerthInfo"
:size="mobile ? 'x-small' : 'small'"
variant="tonal"
:prepend-icon="mobile ? undefined : 'mdi-anchor'"
:class="!mobile ? 'ml-2' : ''"
>
<v-icon v-if="mobile" size="small">mdi-anchor</v-icon>
Berth{{ mobile ? '' : ' Info' }}
</v-btn>
</div>
</div>
<!-- Email Content -->
@@ -172,9 +206,10 @@
v-model="emailDraft.content"
label="Email Content"
variant="outlined"
rows="12"
:rows="mobile ? 8 : 12"
placeholder="Write your email here..."
ref="contentTextarea"
:density="mobile ? 'compact' : 'default'"
/>
<!-- Signature Settings -->
@@ -237,14 +272,19 @@
<div class="text-body-2 mb-2">Attachments</div>
<!-- Attachment Options -->
<v-btn-toggle v-model="attachmentMode" mandatory class="mb-3">
<v-btn value="upload" size="small">
<v-icon start>mdi-upload</v-icon>
Upload Files
<v-btn-toggle
v-model="attachmentMode"
mandatory
class="mb-3"
:density="mobile ? 'compact' : 'default'"
>
<v-btn value="upload" :size="mobile ? 'x-small' : 'small'">
<v-icon :start="!mobile" :size="mobile ? 'small' : 'default'">mdi-upload</v-icon>
<span :class="mobile ? 'text-caption' : ''">{{ mobile ? 'Upload' : 'Upload Files' }}</span>
</v-btn>
<v-btn value="browse" size="small">
<v-icon start>mdi-folder-open</v-icon>
Browse Files
<v-btn value="browse" :size="mobile ? 'x-small' : 'small'">
<v-icon :start="!mobile" :size="mobile ? 'small' : 'default'">mdi-folder-open</v-icon>
<span :class="mobile ? 'text-caption' : ''">{{ mobile ? 'Browse' : 'Browse Files' }}</span>
</v-btn>
</v-btn-toggle>
@@ -254,11 +294,11 @@
v-model="emailDraft.attachments"
label="Select files to attach"
variant="outlined"
density="comfortable"
:density="mobile ? 'compact' : 'comfortable'"
multiple
chips
prepend-icon="mdi-paperclip"
show-size
:show-size="!mobile"
/>
<!-- Browse Mode -->
@@ -267,10 +307,11 @@
@click="openFileBrowser"
variant="outlined"
block
size="large"
prepend-icon="mdi-folder-open"
:size="mobile ? 'default' : 'large'"
:prepend-icon="!mobile ? 'mdi-folder-open' : undefined"
:icon="mobile ? 'mdi-folder-open' : undefined"
>
Browse Files
<span v-if="!mobile">Browse Files</span>
</v-btn>
</div>
@@ -313,8 +354,13 @@
</v-dialog>
<!-- File Browser Dialog -->
<v-dialog v-model="showFileBrowser" max-width="1200" height="80vh">
<v-card height="80vh">
<v-dialog
v-model="showFileBrowser"
:max-width="mobile ? '100%' : '1200'"
:fullscreen="mobile"
:transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
>
<v-card :height="mobile ? '100vh' : '80vh'">
<v-card-title class="d-flex align-center">
<v-icon class="mr-2">mdi-folder-open</v-icon>
Select Files from Browser
@@ -362,6 +408,7 @@ const emit = defineEmits<{
'update': [];
}>();
const { mobile } = useDisplay();
const toast = useToast();
const showComposer = ref(false);
const isSending = ref(false);
@@ -802,6 +849,11 @@ const cancelFileBrowser = () => {
line-height: 1.6;
}
.email-content-mobile {
max-height: 150px;
font-size: 0.875rem;
}
.email-content :deep(p) {
margin: 0 0 0.5em 0;
}
@@ -816,4 +868,10 @@ const cancelFileBrowser = () => {
max-height: 600px;
overflow-y: auto;
}
@media (max-width: 768px) {
.email-threads {
max-height: 400px;
}
}
</style>

122
components/EOISection.vue
View File

@@ -35,9 +35,11 @@
:loading="isGenerating"
color="primary"
variant="flat"
prepend-icon="mdi-file-document-plus"
:prepend-icon="!mobile ? 'mdi-file-document-plus' : undefined"
:icon="mobile ? 'mdi-file-document-plus' : undefined"
:size="mobile ? 'default' : 'default'"
>
Generate EOI
<span v-if="!mobile">Generate EOI</span>
</v-btn>
</div>
@@ -47,42 +49,45 @@
@click="showUploadDialog = true"
:variant="hasEOI ? 'tonal' : 'outlined'"
:color="hasEOI ? 'success' : 'primary'"
prepend-icon="mdi-upload"
:prepend-icon="!mobile ? 'mdi-upload' : undefined"
:disabled="isUploading"
size="large"
:size="mobile ? 'default' : 'large'"
>
{{ hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document' }}
{{ mobile ? 'Upload EOI' : (hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document') }}
</v-btn>
</div>
<!-- EOI Status Badge -->
<div v-if="hasEOI || hasEOIDocuments" class="mb-4 d-flex align-center">
<div v-if="hasEOI || hasEOIDocuments" class="mb-4 d-flex align-center flex-wrap">
<v-chip
:color="getStatusColor(interest['EOI Status'])"
variant="tonal"
prepend-icon="mdi-file-document-check"
:prepend-icon="!mobile ? 'mdi-file-document-check' : undefined"
:size="mobile ? 'small' : 'default'"
class="mb-1"
>
{{ interest['EOI Status'] }}
</v-chip>
<span v-if="interest['EOI Time Sent']" class="text-caption text-grey-darken-1 ml-3">
Sent: {{ formatDate(interest['EOI Time Sent']) }}
{{ mobile ? '' : 'Sent: ' }}{{ formatDate(interest['EOI Time Sent']) }}
</span>
</div>
<!-- Signature Links - Only show if EOI is generated but not uploaded/signed -->
<v-list v-if="hasEOI && !isEOISigned" density="comfortable">
<v-list v-if="hasEOI && !isEOISigned" :density="mobile ? 'compact' : 'comfortable'">
<v-list-item class="mb-2">
<template v-slot:prepend>
<v-avatar color="primary" size="40">
<v-icon>mdi-account</v-icon>
<v-avatar color="primary" :size="mobile ? 32 : 40">
<v-icon :size="mobile ? 'small' : 'default'">mdi-account</v-icon>
</v-avatar>
</template>
<v-list-item-title>Client Signature Link</v-list-item-title>
<v-list-item-subtitle>{{ interest['Full Name'] }}</v-list-item-subtitle>
<v-list-item-title :class="mobile ? 'text-body-2' : ''">Client Signature Link</v-list-item-title>
<v-list-item-subtitle :class="mobile ? 'text-caption' : ''">{{ interest['Full Name'] }}</v-list-item-subtitle>
<template v-slot:append>
<v-btn
icon="mdi-content-copy"
variant="text"
:size="mobile ? 'small' : 'default'"
@click="copyLink(interest['Signature Link Client'])"
></v-btn>
</template>
@@ -90,16 +95,17 @@
<v-list-item class="mb-2">
<template v-slot:prepend>
<v-avatar color="success" size="40">
<v-icon>mdi-account-check</v-icon>
<v-avatar color="success" :size="mobile ? 32 : 40">
<v-icon :size="mobile ? 'small' : 'default'">mdi-account-check</v-icon>
</v-avatar>
</template>
<v-list-item-title>CC Signature Link</v-list-item-title>
<v-list-item-subtitle>Oscar Faragher</v-list-item-subtitle>
<v-list-item-title :class="mobile ? 'text-body-2' : ''">CC Signature Link</v-list-item-title>
<v-list-item-subtitle :class="mobile ? 'text-caption' : ''">Oscar Faragher</v-list-item-subtitle>
<template v-slot:append>
<v-btn
icon="mdi-content-copy"
variant="text"
:size="mobile ? 'small' : 'default'"
@click="copyLink(interest['Signature Link CC'])"
></v-btn>
</template>
@@ -107,16 +113,17 @@
<v-list-item class="mb-2">
<template v-slot:prepend>
<v-avatar color="secondary" size="40">
<v-icon>mdi-account-tie</v-icon>
<v-avatar color="secondary" :size="mobile ? 32 : 40">
<v-icon :size="mobile ? 'small' : 'default'">mdi-account-tie</v-icon>
</v-avatar>
</template>
<v-list-item-title>Developer Signature Link</v-list-item-title>
<v-list-item-subtitle>David Mizrahi</v-list-item-subtitle>
<v-list-item-title :class="mobile ? 'text-body-2' : ''">Developer Signature Link</v-list-item-title>
<v-list-item-subtitle :class="mobile ? 'text-caption' : ''">David Mizrahi</v-list-item-subtitle>
<template v-slot:append>
<v-btn
icon="mdi-content-copy"
variant="text"
:size="mobile ? 'small' : 'default'"
@click="copyLink(interest['Signature Link Developer'])"
></v-btn>
</template>
@@ -152,7 +159,7 @@
<!-- Reminder Settings - Only show if EOI is generated but not uploaded/signed -->
<v-divider v-if="hasEOI && !isEOISigned" class="mt-4 mb-4" />
<v-row v-if="hasEOI && !isEOISigned" dense align="center">
<v-col cols="auto">
<v-col :cols="mobile ? 12 : 'auto'">
<v-switch
v-model="remindersEnabled"
@update:model-value="updateReminderSettings"
@@ -161,9 +168,17 @@
density="compact"
>
<template v-slot:label>
<span class="text-body-2">
<span :class="mobile ? 'text-caption' : 'text-body-2'">
Automatic Reminders
<v-tooltip activator="parent" location="top">
<v-icon
v-if="mobile"
size="x-small"
class="ml-1"
@click.stop="showReminderInfo = true"
>
mdi-information-outline
</v-icon>
<v-tooltip v-else activator="parent" location="top">
<div style="max-width: 300px">
When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients
</div>
@@ -176,7 +191,12 @@
</v-card-text>
<!-- Upload Dialog -->
<v-dialog v-model="showUploadDialog" max-width="600">
<v-dialog
v-model="showUploadDialog"
:max-width="mobile ? '100%' : '600'"
:fullscreen="mobile"
:transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
>
<v-card>
<v-card-title class="d-flex align-center">
<v-icon class="mr-2" color="primary">mdi-upload</v-icon>
@@ -187,26 +207,26 @@
<v-divider />
<v-card-text class="pa-6">
<div class="text-center mb-6">
<v-icon size="80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
<div class="text-h6 mb-2">Choose how to upload your EOI</div>
<div class="text-body-2 text-grey">Upload a signed PDF document</div>
<v-card-text :class="mobile ? 'pa-4' : 'pa-6'">
<div class="text-center" :class="mobile ? 'mb-4' : 'mb-6'">
<v-icon :size="mobile ? 60 : 80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
<div :class="mobile ? 'text-body-1 mb-2' : 'text-h6 mb-2'">Choose how to upload your EOI</div>
<div :class="mobile ? 'text-caption' : 'text-body-2'" class="text-grey">Upload a signed PDF document</div>
</div>
<v-file-input
v-model="selectedFile"
label="Drop your PDF here or click to browse"
:label="mobile ? 'Select PDF file' : 'Drop your PDF here or click to browse'"
accept=".pdf"
prepend-icon=""
variant="outlined"
density="comfortable"
:density="mobile ? 'compact' : 'comfortable'"
:rules="[v => !!v || 'Please select a file']"
show-size
:show-size="!mobile"
class="mt-4"
>
<template v-slot:prepend-inner>
<v-icon color="primary">mdi-file-pdf-box</v-icon>
<v-icon color="primary" :size="mobile ? 'small' : 'default'">mdi-file-pdf-box</v-icon>
</template>
</v-file-input>
</v-card-text>
@@ -215,7 +235,7 @@
<v-card-actions class="pa-4">
<v-spacer />
<v-btn @click="closeUploadDialog" variant="text" size="large">
<v-btn @click="closeUploadDialog" variant="text" :size="mobile ? 'default' : 'large'">
Cancel
</v-btn>
<v-btn
@@ -224,17 +244,21 @@
@click="handleUpload"
:loading="isUploading"
:disabled="!selectedFile"
size="large"
prepend-icon="mdi-upload"
:size="mobile ? 'default' : 'large'"
:prepend-icon="!mobile ? 'mdi-upload' : undefined"
>
Upload EOI
Upload{{ mobile ? '' : ' EOI' }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Delete Confirmation Dialog -->
<v-dialog v-model="showDeleteConfirmDialog" max-width="400">
<v-dialog
v-model="showDeleteConfirmDialog"
:max-width="mobile ? '100%' : '400'"
:transition="mobile ? 'dialog-bottom-transition' : 'dialog-transition'"
>
<v-card>
<v-card-title class="d-flex align-center">
<v-icon class="mr-2" color="error">mdi-alert</v-icon>
@@ -271,6 +295,24 @@
</v-card-actions>
</v-card>
</v-dialog>
<!-- Mobile Reminder Info Dialog -->
<v-dialog v-if="mobile" v-model="showReminderInfo" max-width="300">
<v-card>
<v-card-title class="text-h6">
Automatic Reminders
</v-card-title>
<v-card-text>
When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients.
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" variant="text" @click="showReminderInfo = false">
Got it
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
@@ -286,6 +328,7 @@ const emit = defineEmits<{
'update': [];
}>();
const { mobile } = useDisplay();
const toast = useToast();
const isGenerating = ref(false);
const showUploadDialog = ref(false);
@@ -293,6 +336,7 @@ const isUploading = ref(false);
const selectedFile = ref<File | null>(null);
const showDeleteConfirmDialog = ref(false);
const isDeleting = ref(false);
const showReminderInfo = ref(false);
// Reminder settings
const remindersEnabled = ref(true);

7
components/InterestDetailsModal.vue
View File

@@ -4,8 +4,9 @@
fullscreen
hide-overlay
transition="dialog-bottom-transition"
:scrollable="false"
>
<v-card>
<v-card class="d-flex flex-column" style="height: 100vh;">
<v-toolbar dark color="primary">
<v-btn icon dark @click="closeModal">
<v-icon>mdi-close</v-icon>
@@ -77,7 +78,8 @@
</v-toolbar-items>
</v-toolbar>
<v-card-text v-if="interest">
<v-card-text v-if="interest" class="flex-grow-1 overflow-y-auto pa-0">
<div class="pa-4">
<v-stepper
v-show="!mobile"
v-model="currentStep"
@@ -630,6 +632,7 @@
@update="onInterestUpdated"
/>
</v-form>
</div>
</v-card-text>
</v-card>
</v-dialog>