edit page: change footer and order order of elements

frontend/src/layouts/MainLayout.vue

@@ -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>

frontend/src/pages/EditPage.vue

@@ -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 -->
+              <!-- Tab Panels (without tab navigation here) -->
-              <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 -->
               <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 -->
+                <!-- Tab 4: Details - Location, Persons, Category, Tags, Delete -->
-                <q-tab-panel name="content" class="q-pa-none">
+                <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"
+                      v-model="form.location"
-                      label="Subheadline"
+                      label="Location"
                       filled
-                    />
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="place" />
+                      </template>
+                    </q-input>
 
-                    <!-- Text -->
+                    <!-- Related Persons -->
-                    <q-input
+                    <div class="q-mb-md">
-                      v-model="form.text"
+                      <q-separator class="q-mt-lg q-mb-lg" />
-                      label="Description"
+                      <q-label class="text-subtitle2 q-mb-sm">Related Persons</q-label>
-                      filled
+                      <v-select
-                      type="textarea"
+                        v-model="selectedPerson"
-                      rows="4"
+                        :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>
+                    <!-- Delete Entry Section -->
-                </q-tab-panel>
+                    <div class="q-mb-md q-mt-lg">
-
+                      <q-separator class="q-mt-lg q-mb-lg" />
-                <!-- Tab 4: Details -->
+                      <q-label class="text-subtitle2 q-mb-sm text-negative">Danger Zone</q-label>
-                <q-tab-panel name="details" class="q-pa-none">
+                      <p class="text-caption text-grey q-mb-md">
-                  <div class="q-gutter-md q-mt-md">
+                        Once you delete this entry, it cannot be recovered. Please be certain.
-                    
+                      </p>
-                    <!-- Location -->
+                      <q-btn
-                    <q-input
+                        label="Delete Entry"
-                      v-model="form.location"
+                        icon="delete"
-                      label="Location"
+                        color="negative"
-                      filled
+                        outline
-                    >
+                        @click="confirmDelete"
-                      <template v-slot:prepend>
+                        class="full-width"
-                        <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
                       />
-                      
-                      <!-- 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
+    // Get current date and time
-    const form = reactive({ ...defaultFormData })
+    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%;
 }