FEDEO/pages/settings/texttemplates.vue

<script setup>
  const dataStore = useDataStore()

  defineShortcuts({
    '+': () => {
      editTemplateModalOpen.value = true
    }
  })

  const editTemplateModalOpen = ref(false)
  const itemInfo = ref({})
  const texttemplates = ref([])

  const setup = async () => {
    texttemplates.value = (await useSupabaseSelect("texttemplates")).filter(i => !i.archived)
  }

  setup()

  const expand = ref({
    openedRows: [],
    row: {}
  })


</script>

<template>
  <UDashboardNavbar
    title="Text Vorlagen"
  >
      <template #right>
        <UButton
          @click="editTemplateModalOpen = true, itemInfo = {}"
        >
          + Erstellen
        </UButton>
      </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <UCard class="mx-5">
      <template #header>
        Variablen
      </template>
      <table>
        <tr>
          <th class="text-left">Variable</th>
          <th class="text-left">Beschreibung</th>
        </tr>
        <tr>
          <td>vorname</td>
          <td>Vorname</td>
        </tr>
        <tr>
          <td>nachname</td>
          <td>Nachname</td>
        </tr>
        <tr>
          <td>zahlungsziel_in_tagen</td>
          <td>Zahlungsziel in Tagen</td>
        </tr>
      </table>

    </UCard>

    <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 mr-3"
              @click="itemInfo = row;
             editTemplateModalOpen = true"
              variant="outline"
          >Bearbeiten</UButton>
          <ButtonWithConfirm
              color="rose"
              variant="outline"
              @confirmed="dataStore.updateItem('texttemplates',{id: row.id,archived: true}),
                      setup"
          >
            <template #button>
              Archivieren
            </template>
            <template #header>
              <span class="text-md dark:text-whitetext-black font-bold">Archivieren bestätigen</span>
            </template>
            Möchten Sie diesen Ausgangsbeleg wirklich archivieren?
          </ButtonWithConfirm>
        </div>
      </template>
    </UTable>


<!--    <div class="w-3/4 mx-auto mt-5">
      <UCard
          v-for="template in dataStore.texttemplates"
          class="mb-3"
      >
        <p class="text-2xl">{{dataStore.documentTypesForCreation[template.documentType].label}}</p>
        <p class="text-xl">{{template.pos === 'startText' ? 'Einleitung' : 'Ende'}}</p>
        <p class="text-justify">{{template.text}}</p>
        <UButton
            @click="itemInfo = template;
             editTemplateModalOpen = true"
          icon="i-heroicons-pencil-solid"
          variant="outline"
        />
      </UCard>
    </div>-->
  </UDashboardPanelContent>

  <UModal
    v-model="editTemplateModalOpen"
  >
    <UCard class="h-full">
      <template #header>
        {{itemInfo.id ? 'Vorlage bearbeiten' : 'Vorlage erstellen'}}
      </template>

      <UForm class="h-full">

        <UFormGroup
            label="Name:"
        >
          <UInput
              v-model="itemInfo.name"
          />
        </UFormGroup>
        <UFormGroup
          label="Dokumententyp:"
        >

          <USelectMenu
            :options="Object.keys(dataStore.documentTypesForCreation).filter(i => i !== 'serialInvoices').map(i => {
              return {
                label: dataStore.documentTypesForCreation[i].label,
                key: i
              }
            })"
            option-attribute="label"
            value-attribute="key"
            v-model="itemInfo.documentType"
          />
        </UFormGroup>
        <UFormGroup
          label="Position:"
        >
          <USelectMenu
            :options="[{label:'Einleitung',key: 'startText'},{label:'Ende',key: 'endText'}]"
            option-attribute="label"
            value-attribute="key"
            v-model="itemInfo.pos"
          />
        </UFormGroup>
        <UFormGroup
          label="Text:"
        >
          <UTextarea
            v-model="itemInfo.text"
          />
        </UFormGroup>
      </UForm>


      <template #footer>
        <UButton
          @click="dataStore.createNewItem('texttemplates',itemInfo);
                  editTemplateModalOpen = false"
          v-if="!itemInfo.id"
        >Erstellen</UButton>
        <UButton
          @click="dataStore.updateItem('texttemplates',itemInfo);
                  editTemplateModalOpen = false"
          v-if="itemInfo.id"
        >Speichern</UButton>
      </template>
    </UCard>
  </UModal>



</template>

<style scoped>

</style>