FEDEO/frontend/pages/settings/tenant.vue

<script setup>

const auth = useAuthStore()

const itemInfo = ref({
  features: {},
  businessInfo: {},
  projectTypes: []
})

const setupPage = async () => {
  itemInfo.value = auth.activeTenantData
  console.log(itemInfo.value)
}

const features = ref(auth.activeTenantData.features)
const businessInfo = ref(auth.activeTenantData.businessInfo)
const accountChart = ref(auth.activeTenantData.accountChart || "skr03")
const accountChartOptions = [
  { label: "SKR 03", value: "skr03" },
  { label: "Verein", value: "verein" }
]

const updateTenant = async (newData) => {

  const res = await useNuxtApp().$api(`/api/tenant/other/${auth.activeTenant}`, {
    method: "PUT",
    body: {
      data: newData,
    }
  })

  if (res) {
    itemInfo.value = res
    auth.activeTenantData = res
  }
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="Firmeneinstellungen">

  </UDashboardNavbar>
  <UTabs
      class="p-5"
      :items="[
        {
          label: 'Dokubox'
        },{
          label: 'Rechnung & Kontakt'
        }
    ]"
  >
    <template #item="{item}">
      <div v-if="item.label === 'Dokubox'">
        <UAlert
            class="mt-5"
            title="DOKUBOX"
        >
          <template #description>
            <p>Die Dokubox ist eine E-Mail Inbox um deine Anhänge direkt als Dokumente zu importieren. Leite Deine E-Mails einfach an die folgende E-Mail Adresse weiter, diese ist für dein Unternehmen einzigartig. Die E-Mails werden dann alle 5 min abgerufen.</p>
            <br><br>
            <a
                v-if="itemInfo.id"
                :href="`mailto:${itemInfo.dokuboxkey}@fedeo-dokubox.de`"
            >
              {{itemInfo.dokuboxkey}}@fedeo-dokubox.de
            </a>
          </template>
        </UAlert>

      </div>
      <div v-if="item.label === 'Rechnung & Kontakt'">
          <UCard class="mt-5">
            <UForm class="w-1/2">
            <UFormGroup
                label="Firmenname:"
            >
              <UInput v-model="businessInfo.name"/>
            </UFormGroup>
            <UFormGroup
                label="Straße + Hausnummer:"
            >
              <UInput v-model="businessInfo.street"/>
            </UFormGroup>
            <UFormGroup
                label="PLZ + Ort"
                class="w-full"
            >
              <InputGroup class="w-full">
                <UInput v-model="businessInfo.zip"/>
                <UInput v-model="businessInfo.city" class="flex-auto"/>
              </InputGroup>
            </UFormGroup>
            <UButton
                class="mt-3"
                @click="updateTenant({businessInfo: businessInfo})"
            >
              Speichern
            </UButton>
            <UFormGroup
                label="Kontenrahmen:"
                class="mt-6"
            >
              <USelectMenu
                  v-model="accountChart"
                  :options="accountChartOptions"
                  option-attribute="label"
                  value-attribute="value"
              />
            </UFormGroup>
            <UButton
                class="mt-3"
                @click="updateTenant({accountChart: accountChart})"
            >
              Kontenrahmen speichern
            </UButton>
          </UForm>
        </UCard>

      </div>
      <div v-else-if="item.label === 'Funktionen'">
        <UCard class="mt-5">
          <UAlert
              title="Funktionen ausblenden"
              description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
              color="rose"
              variant="outline"
              class="mb-5"
          />
          <UCheckbox
              label="Kalendar"
              v-model="features.calendar"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Kontakte"
              v-model="features.contacts"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Plantafel"
              v-model="features.planningBoard"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Zeiterfassung"
              v-model="features.timeTracking"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Anwesenheiten"
              v-model="features.workingTimeTracking"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Lager"
              v-model="features.inventory"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Fahrzeuge"
              v-model="features.vehicles"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Buchhaltung"
              v-model="features.accounting"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Projekte"
              v-model="features.projects"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Verträge"
              v-model="features.contracts"
              @change="updateTenant({features: features})"
          />
          <UCheckbox
              label="Objekte"
              v-model="features.objects"
              @change="updateTenant({features: features})"
          />
        </UCard>
      </div>
    </template>
  </UTabs>
</template>

<style scoped>

</style>