add elements

frontend/src/components/panels/PropertiesPanel.vue

@@ -10,6 +10,11 @@ import type {
   PageNumberElement,
   BarcodeElement,
   RepeatingTableElement,
+  CurrentDateElement,
+  ShapeElement,
+  CheckboxElement,
+  CalculatedTextElement,
+  RichTextElement,
 } from '../../core/types'
 import PositioningProperties from '../properties/PositioningProperties.vue'
 import SizeProperties from '../properties/SizeProperties.vue'
@@ -18,6 +23,11 @@ import LineProperties from '../properties/LineProperties.vue'
 import ImageProperties from '../properties/ImageProperties.vue'
 import PageNumberProperties from '../properties/PageNumberProperties.vue'
 import BarcodeProperties from '../properties/BarcodeProperties.vue'
+import CurrentDateProperties from '../properties/CurrentDateProperties.vue'
+import ShapeProperties from '../properties/ShapeProperties.vue'
+import CheckboxProperties from '../properties/CheckboxProperties.vue'
+import CalculatedTextProperties from '../properties/CalculatedTextProperties.vue'
+import RichTextProperties from '../properties/RichTextProperties.vue'
 import ContainerProperties from '../properties/ContainerProperties.vue'
 import RepeatingTableProperties from '../properties/RepeatingTableProperties.vue'
 import '../../styles/properties.css'
@@ -35,7 +45,10 @@ const elementTypeLabel = computed(() => {
   const el = selectedElement.value
   if (!el) return ''
   switch (el.type) {
-    case 'container': return 'Container'
+    case 'container':
+      if (el.id === 'header') return 'Üst Bilgi'
+      if (el.id === 'footer') return 'Alt Bilgi'
+      return 'Container'
     case 'static_text': return 'Metin'
     case 'text': return 'Metin'
     case 'line': return 'Cizgi'
@@ -43,10 +56,28 @@ const elementTypeLabel = computed(() => {
     case 'image': return 'Gorsel'
     case 'page_number': return 'Sayfa No'
     case 'barcode': return 'Barkod'
+    case 'checkbox': return 'Onay Kutusu'
+    case 'shape': return 'Sekil'
+    case 'current_date': return 'Tarih'
+    case 'calculated_text': return 'Hesaplanan Metin'
+    case 'rich_text': return 'Zengin Metin'
+    case 'page_break': return 'Sayfa Sonu'
     default: return 'Eleman'
   }
 })
 
+function toggleHeader(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  if (checked) templateStore.enableHeader()
+  else templateStore.disableHeader()
+}
+
+function toggleFooter(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  if (checked) templateStore.enableFooter()
+  else templateStore.disableFooter()
+}
+
 function deleteElement() {
   const id = editorStore.selectedElementId
   if (!id || id === 'root') return
@@ -70,41 +101,85 @@ function deleteElement() {
         </div>
       </div>
 
-      <PositioningProperties :element="selectedElement" />
-      <SizeProperties :element="selectedElement" />
+      <!-- Page break: minimal info, just delete -->
+      <template v-if="selectedElement.type === 'page_break'">
+        <div class="prop-section">
+          <button class="prop-delete-btn" @click="deleteElement">Sil</button>
+        </div>
+      </template>
 
-      <TextProperties
-        v-if="selectedElement.type === 'static_text' || selectedElement.type === 'text'"
-        :element="selectedElement" />
+      <template v-else>
+        <PositioningProperties :element="selectedElement" />
+        <SizeProperties :element="selectedElement" />
 
-      <LineProperties
-        v-if="selectedElement.type === 'line'"
-        :element="(selectedElement as LineElement)" />
+        <TextProperties
+          v-if="selectedElement.type === 'static_text' || selectedElement.type === 'text'"
+          :element="selectedElement" />
 
-      <ImageProperties
-        v-if="selectedElement.type === 'image'"
-        :element="(selectedElement as ImageElement)" />
+        <LineProperties
+          v-if="selectedElement.type === 'line'"
+          :element="(selectedElement as LineElement)" />
 
-      <PageNumberProperties
-        v-if="selectedElement.type === 'page_number'"
-        :element="(selectedElement as PageNumberElement)" />
+        <ImageProperties
+          v-if="selectedElement.type === 'image'"
+          :element="(selectedElement as ImageElement)" />
 
-      <BarcodeProperties
-        v-if="selectedElement.type === 'barcode'"
-        :element="(selectedElement as BarcodeElement)" />
+        <PageNumberProperties
+          v-if="selectedElement.type === 'page_number'"
+          :element="(selectedElement as PageNumberElement)" />
 
-      <ContainerProperties
-        v-if="isContainer(selectedElement)"
-        :element="(selectedElement as ContainerElement)" />
+        <BarcodeProperties
+          v-if="selectedElement.type === 'barcode'"
+          :element="(selectedElement as BarcodeElement)" />
 
-      <RepeatingTableProperties
-        v-if="selectedElement.type === 'repeating_table'"
-        :element="(selectedElement as RepeatingTableElement)" />
+        <CurrentDateProperties
+          v-if="selectedElement.type === 'current_date'"
+          :element="(selectedElement as CurrentDateElement)" />
 
-      <!-- Delete -->
-      <div v-if="selectedElement.id !== 'root'" class="prop-section">
-        <button class="prop-delete-btn" @click="deleteElement">Sil</button>
-      </div>
+        <CheckboxProperties
+          v-if="selectedElement.type === 'checkbox'"
+          :element="(selectedElement as CheckboxElement)" />
+
+        <CalculatedTextProperties
+          v-if="selectedElement.type === 'calculated_text'"
+          :element="(selectedElement as CalculatedTextElement)" />
+
+        <RichTextProperties
+          v-if="selectedElement.type === 'rich_text'"
+          :element="(selectedElement as RichTextElement)" />
+
+        <ShapeProperties
+          v-if="selectedElement.type === 'shape'"
+          :element="(selectedElement as ShapeElement)" />
+
+        <ContainerProperties
+          v-if="isContainer(selectedElement)"
+          :element="(selectedElement as ContainerElement)" />
+
+        <RepeatingTableProperties
+          v-if="selectedElement.type === 'repeating_table'"
+          :element="(selectedElement as RepeatingTableElement)" />
+
+        <!-- Header/Footer toggles for root element -->
+        <div v-if="selectedElement.id === 'root'" class="prop-section">
+          <div class="prop-section__title">Sayfa Ust/Alt Bilgi</div>
+          <div class="prop-row">
+            <label class="prop-label">Ust Bilgi (Header)</label>
+            <input type="checkbox" :checked="!!templateStore.template.header"
+              @change="toggleHeader" />
+          </div>
+          <div class="prop-row">
+            <label class="prop-label">Alt Bilgi (Footer)</label>
+            <input type="checkbox" :checked="!!templateStore.template.footer"
+              @change="toggleFooter" />
+          </div>
+        </div>
+
+        <!-- Delete -->
+        <div v-if="selectedElement.id !== 'root'" class="prop-section">
+          <button class="prop-delete-btn" @click="deleteElement">Sil</button>
+        </div>
+      </template>
     </template>
   </div>
 </template>