edit page: change footer and order order of elements
This commit is contained in:
Tilman Behrend
parent
ccd7adf0cb
commit
fd5bc7faea
2 changed files with 293 additions and 123 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<q-header elevated>
|
||||
<q-toolbar>
|
||||
<q-toolbar-title>
|
||||
MIIUS <!-- Me You Us -->
|
||||
THATS ME
|
||||
</q-toolbar-title>
|
||||
|
||||
<!-- Add login status indicator -->
|
||||
|
|
@ -493,7 +493,7 @@
|
|||
<q-tabs align="justify" dense>
|
||||
<q-route-tab to="/" icon="home" />
|
||||
<q-route-tab to="/people" icon="people" />
|
||||
<q-route-tab to="/entry" icon="add_circle_outline" />
|
||||
<q-route-tab to="/edit" icon="add_circle_outline" />
|
||||
<q-route-tab to="/messages" icon="mail" />
|
||||
<q-route-tab to="/profile" icon="person" />
|
||||
</q-tabs>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,20 @@
|
|||
<template>
|
||||
<q-page padding>
|
||||
<q-page padding class="edit-page-container">
|
||||
<div class="row justify-center">
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<div class="col-12 col-md-8 col-lg-3">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h5">Edit Entry</div>
|
||||
<div class="text-h5">Entry</div>
|
||||
<div class="text-subtitle2 text-grey">Modify your life event details</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-form @submit.prevent="onSave" class="q-gutter-md">
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<q-tabs
|
||||
v-model="currentTab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
>
|
||||
<q-tab name="basics" icon="mood" label="Basics" />
|
||||
<q-tab name="media" icon="perm_media" label="Media" />
|
||||
<q-tab name="content" icon="article" label="Content" />
|
||||
<q-tab name="details" icon="info" label="Details" />
|
||||
</q-tabs>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<!-- Tab Panels -->
|
||||
<!-- Tab Panels (without tab navigation here) -->
|
||||
<q-tab-panels v-model="currentTab" animated>
|
||||
|
||||
<!-- Tab 1: Basics -->
|
||||
<!-- Tab 1: Basics - Only Image and Emotional Level -->
|
||||
<q-tab-panel name="basics" class="q-pa-none">
|
||||
<div class="q-gutter-md q-mt-md">
|
||||
|
||||
|
|
@ -58,9 +40,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Key Image -->
|
||||
<div class="q-mb-md">
|
||||
<q-label class="text-subtitle2 q-mb-sm">Key Image *</q-label>
|
||||
<q-label class="text-subtitle2 q-mb-sm">Image *</q-label>
|
||||
|
||||
<!-- Preview selected key image -->
|
||||
<div v-if="form.keyImage || form.keyImageUrl" class="q-mb-sm">
|
||||
|
|
@ -98,12 +81,44 @@
|
|||
</q-file>
|
||||
</div>
|
||||
|
||||
<!-- Headline -->
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation for Basics -->
|
||||
<div class="row q-gutter-md q-mt-lg justify-between">
|
||||
<q-btn
|
||||
label="Cancel"
|
||||
color="grey"
|
||||
flat
|
||||
@click="onCancel"
|
||||
class="col-auto"
|
||||
/>
|
||||
<q-btn
|
||||
label="Continue"
|
||||
icon-right="arrow_forward"
|
||||
color="primary"
|
||||
@click="goToNextTab"
|
||||
class="col-auto"
|
||||
/>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- Tab 2: Content - Title, Headline, Date/Time, Description -->
|
||||
<q-tab-panel name="content" class="q-pa-none">
|
||||
<div class="q-gutter-md q-mt-md">
|
||||
|
||||
<!-- Title (formerly Subheadline) - Now mandatory -->
|
||||
<q-input
|
||||
v-model="form.subheadline"
|
||||
label="Title *"
|
||||
filled
|
||||
:rules="[val => !!val || 'Title is required']"
|
||||
/>
|
||||
|
||||
<!-- Headline - Now optional -->
|
||||
<q-input
|
||||
v-model="form.headline"
|
||||
label="Headline *"
|
||||
label="Headline"
|
||||
filled
|
||||
:rules="[val => !!val || 'Headline is required']"
|
||||
/>
|
||||
|
||||
<!-- Date and Time -->
|
||||
|
|
@ -135,10 +150,38 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description (formerly Text) -->
|
||||
<q-input
|
||||
v-model="form.text"
|
||||
label="Description"
|
||||
filled
|
||||
type="textarea"
|
||||
rows="4"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation for Content -->
|
||||
<div class="row q-gutter-md q-mt-lg justify-between">
|
||||
<q-btn
|
||||
label="Back"
|
||||
icon="arrow_back"
|
||||
color="grey"
|
||||
flat
|
||||
@click="goToPreviousTab"
|
||||
class="col-auto"
|
||||
/>
|
||||
<q-btn
|
||||
label="Continue"
|
||||
icon-right="arrow_forward"
|
||||
color="primary"
|
||||
@click="goToNextTab"
|
||||
class="col-auto"
|
||||
/>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- Tab 2: Media -->
|
||||
<!-- Tab 3: Media -->
|
||||
<q-tab-panel name="media" class="q-pa-none">
|
||||
<div class="q-gutter-md q-mt-md">
|
||||
|
||||
|
|
@ -273,30 +316,79 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation for Media -->
|
||||
<div class="row q-gutter-md q-mt-lg justify-between">
|
||||
<q-btn
|
||||
label="Back"
|
||||
icon="arrow_back"
|
||||
color="grey"
|
||||
flat
|
||||
@click="goToPreviousTab"
|
||||
class="col-auto"
|
||||
/>
|
||||
<q-btn
|
||||
label="Continue"
|
||||
icon-right="arrow_forward"
|
||||
color="primary"
|
||||
@click="goToNextTab"
|
||||
class="col-auto"
|
||||
/>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- Tab 3: Content -->
|
||||
<q-tab-panel name="content" class="q-pa-none">
|
||||
<!-- Tab 4: Details - Location, Persons, Category, Tags, Delete -->
|
||||
<q-tab-panel name="details" class="q-pa-none">
|
||||
<div class="q-gutter-md q-mt-md">
|
||||
|
||||
<!-- Subheadline -->
|
||||
<!-- Location -->
|
||||
<q-input
|
||||
v-model="form.subheadline"
|
||||
label="Subheadline"
|
||||
v-model="form.location"
|
||||
label="Location"
|
||||
filled
|
||||
/>
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="place" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Text -->
|
||||
<q-input
|
||||
v-model="form.text"
|
||||
label="Description"
|
||||
filled
|
||||
type="textarea"
|
||||
rows="4"
|
||||
/>
|
||||
<!-- Related Persons -->
|
||||
<div class="q-mb-md">
|
||||
<q-separator class="q-mt-lg q-mb-lg" />
|
||||
<q-label class="text-subtitle2 q-mb-sm">Related Persons</q-label>
|
||||
<v-select
|
||||
v-model="selectedPerson"
|
||||
:options="personOptions"
|
||||
placeholder="Add related persons"
|
||||
class="vue-select-custom"
|
||||
@option:selected="addPerson"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<!-- Selected persons circles -->
|
||||
<div v-if="form.relatedPersons.length > 0" class="person-circles q-mt-md">
|
||||
<div
|
||||
v-for="(person, index) in form.relatedPersons"
|
||||
:key="index"
|
||||
class="person-circle"
|
||||
@mouseenter="hoveredPersonIndex = index"
|
||||
@mouseleave="hoveredPersonIndex = null"
|
||||
>
|
||||
<div class="person-initials">{{ getInitials(person) }}</div>
|
||||
<div
|
||||
v-if="hoveredPersonIndex === index"
|
||||
class="person-delete"
|
||||
@click="removePerson(index)"
|
||||
>
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Selection -->
|
||||
<div class="q-mb-md">
|
||||
<q-separator class="q-mt-lg q-mb-lg" />
|
||||
<q-label class="text-subtitle2 q-mb-sm">Category</q-label>
|
||||
|
||||
<!-- Main Category Selection with vue-select -->
|
||||
|
|
@ -347,88 +439,47 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
<!-- Tab 4: Details -->
|
||||
<q-tab-panel name="details" class="q-pa-none">
|
||||
<div class="q-gutter-md q-mt-md">
|
||||
|
||||
<!-- Location -->
|
||||
<q-input
|
||||
v-model="form.location"
|
||||
label="Location"
|
||||
filled
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="place" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Related Persons -->
|
||||
<div class="q-mb-md">
|
||||
<q-label class="text-subtitle2 q-mb-sm">Related Persons</q-label>
|
||||
<v-select
|
||||
v-model="selectedPerson"
|
||||
:options="personOptions"
|
||||
placeholder="Add related persons"
|
||||
class="vue-select-custom"
|
||||
@option:selected="addPerson"
|
||||
clearable
|
||||
<!-- Delete Entry Section -->
|
||||
<div class="q-mb-md q-mt-lg">
|
||||
<q-separator class="q-mt-lg q-mb-lg" />
|
||||
<q-label class="text-subtitle2 q-mb-sm text-negative">Danger Zone</q-label>
|
||||
<p class="text-caption text-grey q-mb-md">
|
||||
Once you delete this entry, it cannot be recovered. Please be certain.
|
||||
</p>
|
||||
<q-btn
|
||||
label="Delete Entry"
|
||||
icon="delete"
|
||||
color="negative"
|
||||
outline
|
||||
@click="confirmDelete"
|
||||
class="full-width"
|
||||
/>
|
||||
|
||||
<!-- Selected persons circles -->
|
||||
<div v-if="form.relatedPersons.length > 0" class="person-circles q-mt-md">
|
||||
<div
|
||||
v-for="(person, index) in form.relatedPersons"
|
||||
:key="index"
|
||||
class="person-circle"
|
||||
@mouseenter="hoveredPersonIndex = index"
|
||||
@mouseleave="hoveredPersonIndex = null"
|
||||
>
|
||||
<div class="person-initials">{{ getInitials(person) }}</div>
|
||||
<div
|
||||
v-if="hoveredPersonIndex === index"
|
||||
class="person-delete"
|
||||
@click="removePerson(index)"
|
||||
>
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation for Details - Back and Publish -->
|
||||
<div class="row q-gutter-md q-mt-lg justify-between">
|
||||
<q-btn
|
||||
label="Back"
|
||||
icon="arrow_back"
|
||||
color="grey"
|
||||
flat
|
||||
@click="goToPreviousTab"
|
||||
class="col-auto"
|
||||
/>
|
||||
<q-btn
|
||||
label="Publish"
|
||||
icon="publish"
|
||||
color="primary"
|
||||
type="submit"
|
||||
class="col-auto"
|
||||
/>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
|
||||
</q-tab-panels>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="row q-gutter-md q-mt-lg">
|
||||
<q-btn
|
||||
label="Delete Entry"
|
||||
icon="delete"
|
||||
color="negative"
|
||||
outline
|
||||
@click="confirmDelete"
|
||||
class="col-auto"
|
||||
/>
|
||||
<q-space />
|
||||
<q-btn
|
||||
label="Cancel"
|
||||
color="grey"
|
||||
flat
|
||||
@click="onCancel"
|
||||
class="col-auto"
|
||||
/>
|
||||
<q-btn
|
||||
label="Save"
|
||||
icon="save"
|
||||
color="primary"
|
||||
type="submit"
|
||||
class="col-auto"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
|
@ -449,6 +500,24 @@
|
|||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Fixed Footer with Tab Navigation - Updated order -->
|
||||
<q-footer elevated class="bg-white text-dark edit-footer">
|
||||
<q-tabs
|
||||
v-model="currentTab"
|
||||
dense
|
||||
class="text-grey full-width"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
>
|
||||
<q-tab name="basics" icon="event" label="Event" />
|
||||
<q-tab name="content" icon="article" label="Content" />
|
||||
<q-tab name="media" icon="perm_media" label="Media" />
|
||||
<q-tab name="details" icon="info" label="Details" />
|
||||
</q-tabs>
|
||||
</q-footer>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
|
|
@ -473,9 +542,25 @@ export default {
|
|||
|
||||
// Tab navigation state
|
||||
const currentTab = ref('basics')
|
||||
const tabOrder = ['basics', 'content', 'media', 'details']
|
||||
|
||||
// Form data - using default form data structure
|
||||
const form = reactive({ ...defaultFormData })
|
||||
// Get current date and time
|
||||
const getCurrentDate = () => {
|
||||
const now = new Date()
|
||||
return now.toISOString().split('T')[0] // Format: YYYY-MM-DD
|
||||
}
|
||||
|
||||
const getCurrentTime = () => {
|
||||
const now = new Date()
|
||||
return now.toTimeString().slice(0, 5) // Format: HH:MM
|
||||
}
|
||||
|
||||
// Form data with current date/time defaults
|
||||
const form = reactive({
|
||||
...defaultFormData,
|
||||
date: getCurrentDate(),
|
||||
time: getCurrentTime()
|
||||
})
|
||||
|
||||
// Category selection state
|
||||
const selectedMainCategory = ref('')
|
||||
|
|
@ -494,6 +579,21 @@ export default {
|
|||
const personOptionsRef = ref([...personOptions])
|
||||
const mainCategoryOptions = ref(getMainCategories())
|
||||
|
||||
// Tab navigation methods
|
||||
const goToNextTab = () => {
|
||||
const currentIndex = tabOrder.indexOf(currentTab.value)
|
||||
if (currentIndex < tabOrder.length - 1) {
|
||||
currentTab.value = tabOrder[currentIndex + 1]
|
||||
}
|
||||
}
|
||||
|
||||
const goToPreviousTab = () => {
|
||||
const currentIndex = tabOrder.indexOf(currentTab.value)
|
||||
if (currentIndex > 0) {
|
||||
currentTab.value = tabOrder[currentIndex - 1]
|
||||
}
|
||||
}
|
||||
|
||||
// Methods
|
||||
const loadEntry = () => {
|
||||
// TODO: Load entry data based on route params
|
||||
|
|
@ -502,14 +602,15 @@ export default {
|
|||
// Load existing entry data
|
||||
// This would typically come from an API call
|
||||
console.log('Loading entry:', entryId)
|
||||
// Note: When loading existing entry, you might want to override the default date/time
|
||||
}
|
||||
}
|
||||
|
||||
const onSave = () => {
|
||||
// TODO: Implement save functionality
|
||||
// TODO: Implement publish functionality
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Entry saved successfully!',
|
||||
message: 'Entry published successfully!',
|
||||
position: 'top'
|
||||
})
|
||||
router.push('/wave')
|
||||
|
|
@ -652,7 +753,16 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// Close navigation drawer when page loads
|
||||
onMounted(() => {
|
||||
// Close the drawer by setting it to false
|
||||
const drawerElement = document.querySelector('.q-drawer')
|
||||
if (drawerElement) {
|
||||
// Trigger close event
|
||||
const closeEvent = new CustomEvent('drawer-close')
|
||||
window.dispatchEvent(closeEvent)
|
||||
}
|
||||
|
||||
loadEntry()
|
||||
})
|
||||
|
||||
|
|
@ -669,6 +779,8 @@ export default {
|
|||
tagOptions: tagOptionsRef,
|
||||
personOptions: personOptionsRef,
|
||||
mainCategoryOptions,
|
||||
goToNextTab,
|
||||
goToPreviousTab,
|
||||
onSave,
|
||||
onCancel,
|
||||
confirmDelete,
|
||||
|
|
@ -695,6 +807,64 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Fix for first item in row with q-gutter having unwanted left margin */
|
||||
.row.q-gutter-md > .col:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Add this more specific rule if the above doesn't work */
|
||||
.row.q-gutter-md.q-mb-md > .col:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Add padding bottom to prevent content from being hidden behind footer */
|
||||
.edit-page-container {
|
||||
padding-bottom: 80px; /* Adjust based on footer height */
|
||||
}
|
||||
|
||||
/* Style the edit footer */
|
||||
.edit-footer {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Ensure tabs are properly sized in footer */
|
||||
.edit-footer .q-tabs {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.edit-footer .q-tab {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
/* Custom tab icon styling */
|
||||
.tab-icon {
|
||||
filter: opacity(0.6);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.q-tab--active .tab-icon {
|
||||
filter: opacity(1);
|
||||
}
|
||||
|
||||
/* Ensure proper spacing for custom tab content */
|
||||
.q-tab .column {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 600px) {
|
||||
.tab-icon {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.q-tab .column span {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-card {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue