remodel of texttemplates Screen

pages/settings/texttemplates.vue

@@ -9,7 +9,18 @@
 
   const editTemplateModalOpen = ref(false)
   const itemInfo = ref({})
+  const texttemplates = ref([])
 
+  const setup = async () => {
+    texttemplates.value = await useSupabaseSelect("texttemplates")
+  }
+
+  setup()
+
+  const expand = ref({
+    openedRows: [],
+    row: {}
+  })
 
 
 </script>
@@ -26,11 +37,8 @@
         </UButton>
       </template>
   </UDashboardNavbar>
-  <UDashboardToolbar>
-
-  </UDashboardToolbar>
   <UDashboardPanelContent>
-    <UCard class="mt-5 mx-5">
+    <UCard class="mx-5">
       <template #header>
         Variablen
       </template>
@@ -55,7 +63,39 @@
 
     </UCard>
 
-    <div class="w-3/4 mx-auto mt-5">
+    <UTable
+        class="mt-3"
+      :rows="texttemplates"
+      v-model:expand="expand"
+      :columns="[{key:'name',label:'Name'},{key:'documentType',label:'Dokumententyp'},{key:'default',label:'Standard'},{key:'pos',label:'Position'}]"
+    >
+      <template #documentType-data="{row}">
+        {{dataStore.documentTypesForCreation[row.documentType].label}}
+      </template>
+      <template #default-data="{row}">
+        {{row.default ? "Ja" : "Nein"}}
+      </template>
+      <template #pos-data="{row}">
+        <span v-if="row.pos === 'startText'">Einleitung</span>
+        <span v-else-if="row.pos === 'endText'">Endtext</span>
+      </template>
+      <template #expand="{ row }">
+        <div class="p-4">
+          <p class="text-2xl">{{dataStore.documentTypesForCreation[row.documentType].label}}</p>
+          <p class="text-xl mt-3">{{row.pos === 'startText' ? 'Einleitung' : 'Ende'}}</p>
+          <p class="text-justify mt-3">{{row.text}}</p>
+          <UButton
+              class="mt-3"
+              @click="itemInfo = row;
+             editTemplateModalOpen = true"
+              variant="outline"
+          >Bearbeiten</UButton>
+        </div>
+      </template>
+    </UTable>
+
+
+<!--    <div class="w-3/4 mx-auto mt-5">
       <UCard
           v-for="template in dataStore.texttemplates"
           class="mb-3"
@@ -70,7 +110,7 @@
           variant="outline"
         />
       </UCard>
-    </div>
+    </div>-->
   </UDashboardPanelContent>
 
   <USlideover