Initial

spaces/pages/customers.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <UButton @click="showCreateCustomer = true">+ Kunde</UButton>
+      <UModal v-model="showCreateCustomer">
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            Kunde erstellen
+          </template>
+
+          <UForm @submit="createCustomer">
+            <UFormGroup label="Name:" required>
+              <UInput v-model="customerInfo.name"/>
+            </UFormGroup>
+            <UFormGroup label="Kundenummer:" required>
+              <UInput type="number" v-model="customerInfo.customerNumber"/>
+            </UFormGroup>
+            <UButton type="submit">
+              Erstellen
+            </UButton>
+          </UForm>
+
+
+        </UCard>
+      </UModal>
+
+
+      <a v-for="item in customers" @click="selectItem(item)">
+        <UCard class="listItem">
+          <UBadge>{{item.attributes.customerNumber}}</UBadge> {{item.attributes.name}}
+        </UCard>
+      </a>
+
+
+
+    </div>
+    <div id="right">
+
+      <UCard v-if="selectedItem.id">
+        <template #header>
+          <UBadge>{{selectedItem.attributes.customerNumber}}</UBadge> {{selectedItem.attributes.name}}
+        </template>
+
+        Kontakte:<br>
+        <ul>
+          <li v-for="contact in selectedItem.attributes.contacts.data">{{contact.attributes.lastName}}, {{contact.attributes.firstName}}</li>
+        </ul>
+<!--        {{selectedItem.attributes.contacts.data}}-->
+        <br>
+        Projekte:<br>
+        <ul>
+          <li v-for="project in selectedItem.attributes.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.attributes.name}}</router-link></li>
+        </ul>
+
+        <br><br>
+
+
+
+
+      </UCard>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const customers = (await find('customers',{populate: "*"})).data
+
+
+let showCreateCustomer = ref(false)
+let customerInfo = ref({
+  name: "",
+  customerNumber: 0
+})
+
+
+let selectedItem = ref({})
+
+const selectItem = (item) => {
+  selectedItem.value = item
+}
+
+const createCustomer = async () => {
+  await create('customers', customerInfo.value)
+  console.log("Create")
+  customerInfo.value = {}
+  showCreateCustomer.value = false
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+
+
+</style>

spaces/pages/documents.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <div class="controlHeader">
+      <UButton @click="uploadModalOpen = true">Hochladen</UButton>
+      <UModal
+        v-model="uploadModalOpen"
+      >
+        <UCard class="p-4">
+
+          <template #header>
+            Datei hochladen
+          </template>
+
+          <UFormGroup
+              label="Datei:"
+          >
+            <UInput
+                type="file"
+                id="fileUploadInput"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Name:"
+            class="mt-3"
+          >
+            <UInput
+                v-model="fileUploadFormData.name"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Tags:"
+            class="mt-3"
+          >
+            <USelectMenu
+                multiple
+                searchable
+                searchable-placeholder="Suchen..."
+                :options="tags"
+                v-model="fileUploadFormData.tags"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton
+                class="mt-3"
+                @click="uploadFile"
+            >Hochladen</UButton>
+          </template>
+
+
+        </UCard>
+
+      </UModal>
+<!--      <USelectMenu :options="sortOptions"/>-->
+    </div>
+    <div class="documentList">
+      <USlideover
+        v-model="showDocumentModal"
+        fullscreen
+      >
+        <UCard>
+          <template #header>
+            {{selectedDocument.attributes.name}}
+          </template>
+<!--          <a
+              v-if="selectedDocument.attributes"
+              target="_blank"
+              :href="`http://localhost:1337${selectedDocument.attributes.file.data.attributes.url}`"
+              class="p-2"
+          >
+            Anzeigen
+
+
+          </a>-->
+
+          <UFormGroup
+              label="Tags:"
+          >
+            <USelectMenu
+                v-if="selectedDocument.attributes"
+                multiple
+                searchable
+                searchable-placeholder="Suchen..."
+                :options="tags"
+                v-on:change="update('documents',selectedDocument.id, {tags: selectedDocument.attributes.tags})"
+                v-model="selectedDocument.attributes.tags"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+              label="Status:"
+              class="mb-3"
+          >
+            <USelectMenu
+                :options="states"
+                v-model="selectedDocument.attributes.state"
+                v-on:change="update('documents',selectedDocument.id,{state: selectedDocument.attributes.state})"
+            />
+          </UFormGroup>
+
+          <div>
+            <VuePDF
+                ref="vuePDFRef"
+                :pdf="pdf"
+                fit-parent
+                :page="page"
+            />
+          </div>
+          <div class="mt-3">
+            <UButton @click="page = page > 1 ? page - 1 : page">
+              Prev
+            </UButton>
+            <span class="mx-3">{{ page }} / {{ pages }}</span>
+            <UButton @click="page = page < pages ? page + 1 : page">
+              Next
+            </UButton>
+          </div>
+
+        </UCard>
+      </USlideover>
+      <a
+          v-for="document in documents.filter(doc => doc.attributes.state != 'Archiviert')" class="documentListItem"
+          @click="openDocument(document)"
+      >
+        <div>
+          {{document.attributes.name}}<br>
+          <UBadge
+              v-for="tag in document.attributes.tags"
+              variant="outline"
+              color="primary"
+          >{{tag}}</UBadge>
+          <UBadge
+            color="rose"
+            variant="outline"
+          >{{document.attributes.state}}</UBadge>
+
+        </div>
+      </a>
+    </div>
+
+<!--    <div class="documentPreview" v-if="selectedDocument.attributes">
+      <UFormGroup
+        label="Tags:"
+      >
+        <USelectMenu
+            v-if="selectedDocument.attributes"
+            multiple
+            searchable
+            searchable-placeholder="Suchen..."
+            :options="tags"
+            v-on:change="update('documents',selectedDocument.id, {tags: selectedDocument.attributes.tags})"
+            v-model="selectedDocument.attributes.tags"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+        label="Status:"
+      >
+        <USelectMenu
+            :options="states"
+            v-model="selectedDocument.attributes.state"
+            v-on:change="update('documents',selectedDocument.id,{state: selectedDocument.attributes.state})"
+        />
+      </UFormGroup>
+      <h4 v-if="selectedDocument.attributes">{{selectedDocument.attributes.name}}</h4>
+&lt;!&ndash;      <embed src="http://localhost:1337/uploads/RE_1748755_cb0b16cd30.pdf">&ndash;&gt;
+      {{selectedDocument}}
+
+    </div>-->
+  </div>
+
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const sortOptions = ['Hinzugefügt',"Bearbeitet","Name"]
+
+const {find,create, update} = useStrapi4()
+const client = useStrapiClient()
+const strapiMediaUrl = useStrapiMedia()
+const documents = (await find('documents',{populate: "*"})).data
+
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const page = ref(1)
+const vuePDFRef = ref(null)
+const pdfSource = ref("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf")
+const { pdf, pages } = usePDF(pdfSource)
+
+const uploadModalOpen = ref(false)
+let fileUploadData = null
+const fileUploadFormData = ref({
+  name: "",
+  tags: ["Dokument"]
+})
+
+let tags = ["Eingangsrechnung","Ausgangrechnung","Mahnung", "Dokument"]
+let states = ["Eingang", "Zugeordnet", "Archiviert"]
+
+const uploadFile = async () => {
+  try {
+
+    fileUploadData = document.getElementById("fileUploadInput").files[0]
+
+    let formData = new FormData()
+    formData.append('files.file', fileUploadData)
+
+    formData.append('data', JSON.stringify(fileUploadFormData.value))
+
+    const {data} = await client("/documents", {
+      method: "POST",
+      body: formData
+    })
+  }
+  catch (error) { alert(error)}
+
+
+  uploadModalOpen.value = false;
+  console.log("test")
+}
+
+const updateDocument = async () => {
+  await update('documents', selectedDocument.id, {tags: selectedDocument.attributes.tags, state: selectedDocument.attributes.state})
+}
+
+
+
+const selectedDocument = ref({})
+const showDocumentModal = ref(false)
+const openDocument = (document) => {
+  selectedDocument.value = document
+  pdfSource.value = `${strapiMediaUrl}${document.attributes.file.data.attributes.url}`
+  showDocumentModal.value = true
+
+}
+
+</script>
+
+<style scoped>
+#main {
+
+  padding:10px;
+}
+
+.controlHeader {
+  grid-area: headerleft;
+}
+
+.documentList {
+  grid-area: main;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  max-width: 80vw;
+  min-height: 75vh;
+  margin-right: 5vw;
+  margin-top: 1em;
+}
+
+.documentListItem {
+  width: 15vw;
+  height: 15vh;
+  margin-right: 1em;
+  padding:1em;
+  border: 1px solid lightgrey;
+  border-radius: 15px;
+}
+
+.documentListItem:hover {
+  border: 1px solid #69c350;
+  cursor: pointer;
+}
+
+.documentPreview {
+  grid-area: right;
+  width: 30vw;
+}
+</style>

spaces/pages/forms.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/index.vue

@@ -0,0 +1,16 @@
+<template>
+
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+  const {find} = useStrapi4()
+  const response = await find('customers')
+  console.log(response)
+</script>
+
+<style scoped>
+
+</style>

spaces/pages/inventory/index.vue

@@ -0,0 +1,126 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const spaces = (await find('spaces',{populate: "*"})).data
+const products = (await find('products',{populate: "*"})).data
+const movements = (await find('movements',{populate: "*"})).data
+
+const searchinput = ref("")
+const mode = ref("")
+
+const toast = useToast()
+
+const inventoryChangeData = ref({
+  productId: "",
+  spaceId: "",
+  quantity: 0
+})
+
+const createMovement = async () => {
+  if(mode.value === 'incoming'){
+    await create('movements', inventoryChangeData.value)
+  } else if (mode.value === 'outgoing'){
+    inventoryChangeData.value.quantity *= -1
+    await create('movements', inventoryChangeData.value)
+  } else if (mode.value === 'change'){}
+
+  inventoryChangeData.value = {
+    productId: "",
+    spaceId: "",
+    quantity: 0
+  }
+  alert("Created")
+}
+
+function checkArticle(productId) {
+  return products.filter(product => product.id === Number(productId)).length > 0;
+}
+function checkSpaceId(spaceId) {
+  return spaces.filter(space => space.attributes.spaceNumber === spaceId).length > 0;
+}
+
+</script>
+
+<template>
+  <div id="main">
+    <router-link to="/inventory/spaces"><UButton>Lagerplätze</UButton></router-link>
+
+    <!--<UInput
+        icon="i-heroicons-magnifying-glass-20-solid"
+        variant="outline"
+        color="primary"
+        placeholder="Barcode / Suche"
+        v-model="searchinput"
+    />-->
+
+    <UButton @click="mode = 'incoming'" class="ml-3" >Wareneingang</UButton>
+    <UButton @click="mode = 'outgoing'" class="ml-1">Warenausgang</UButton>
+    <UButton @click="mode = 'change'" class="ml-1" disabled>Umlagern</UButton>
+
+    <UFormGroup
+        label="Artikel:"
+        class="mt-3"
+    >
+      <UInput
+          variant="outline"
+          :color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
+          placeholder="Barcode / Suche"
+          v-model="inventoryChangeData.productId"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Lagerplatz:"
+        class="mt-3"
+    >
+      <UInput
+          variant="outline"
+          :color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
+          placeholder="Barcode / Suche"
+          v-model="inventoryChangeData.spaceId"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Anzahl:"
+        class="mt-3"
+    >
+      <UInput
+          variant="outline"
+          color="primary"
+          placeholder="Anzahl"
+          v-model="inventoryChangeData.quantity"
+          type="number"
+      />
+    </UFormGroup>
+    <UButton
+        @click="createMovement"
+        :disabled="mode === '' && checkSpaceId(inventoryChangeData.spaceId) && checkArticle(inventoryChangeData.productId)"
+      class="mt-3"
+    >
+      Bestätigen
+    </UButton>
+
+  </div>
+
+
+
+</template>
+
+<style scoped>
+#main {
+  /*display: flex;
+  flex-direction: row;*/
+}
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+</style>

spaces/pages/inventory/spaces.vue

@@ -0,0 +1,126 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create, update} = useStrapi4()
+const spaces = (await find('spaces',{populate: "*"})).data
+const movements = (await find('movements',{populate: "*"})).data
+const products = (await find('products',{populate: "*"})).data
+
+
+let selectedItem = ref({})
+const showCreateSpace = ref(false)
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  spaceMovements.value = movements.filter(movement => movement.attributes.spaceId === selectedItem.value.attributes.spaceNumber)
+  spaceMovements.value.forEach(movement => {
+    if(!spaceProducts.value.includes(movement.attributes.productId)) spaceProducts.value.push(movement.attributes.productId)
+  })
+
+
+
+
+}
+
+const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz"]
+
+const createSpaceData = ref({})
+const createSpace = async () => {
+  let lastSpaceNumber = 0
+  spaces.forEach(space => {
+    if(space.attributes.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.attributes.spaceNumber
+  })
+
+  await create('spaces', {...createSpaceData.value, spaceNumber: String(Number(lastSpaceNumber)+1)})
+  showCreateSpace.value = false
+  createSpaceData.value = {}
+
+}
+
+const spaceProducts = ref([])
+const spaceMovements = ref([])
+
+function getSpaceProductCount(productId) {
+  let productMovements = spaceMovements.value.filter(movement => movement.attributes.productId === productId)
+  let count = 0;
+  productMovements.forEach(movement => count += movement.attributes.quantity)
+
+  return count
+
+}
+
+</script>
+
+<template>
+  <div id="main">
+    <div id="left">
+      <UButton @click="showCreateSpace = true">
+        Erstellen
+      </UButton>
+      <UModal v-model="showCreateSpace">
+        <UCard>
+          <template #header>
+            Lagerplatz erstellen
+          </template>
+          <UFormGroup
+            label="Beschreibung:"
+          >
+            <UTextarea
+              v-model="createSpaceData.description"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Typ:"
+          >
+            <USelectMenu
+              v-model="createSpaceData.type"
+              :options="spaceTypes"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton @click="createSpace">Erstellen</UButton>
+          </template>
+        </UCard>
+      </UModal>
+      <a v-for="item in spaces" @click="selectItem(item)">
+        <UCard class="listItem">
+           {{item.attributes.spaceNumber}} - {{item.attributes.type}}
+        </UCard>
+      </a>
+    </div>
+    <div id="right">
+      <UCard v-if="selectedItem.attributes">
+        <template #header>
+          <UBadge class="mr-1">{{selectedItem.attributes.spaceNumber}}</UBadge>{{selectedItem.attributes.type}}
+        </template>
+        {{selectedItem.attributes.description}}
+
+
+      </UCard>
+
+
+      <p class="mt-5">Artikel in diesem Lagerplatz</p>
+      <p v-for="product in spaceProducts">{{products.find(productItem => Number(productItem.id) === Number(product)).attributes.name}} - {{getSpaceProductCount(product)}} {{products.find(productItem => Number(productItem.id) === Number(product)).attributes.unit}}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+#main {
+  display: flex;
+  flex-direction: row;
+}
+
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+</style>

spaces/pages/login.vue

@@ -0,0 +1,69 @@
+<script setup >
+
+const { login } = useStrapiAuth()
+const router = useRouter()
+
+const username = ref("flfeders")
+const password = ref("Open@all4me!")
+
+
+const onSubmit = async () => {
+  try {
+    await login({identifier: username.value, password: password.value})
+    console.log("Successfully Logged In")
+    router.push("/tasks")
+
+  } catch(e) {
+    console.log(e)
+  }
+}
+
+const user = useStrapiUser()
+console.log(user)
+
+
+
+</script>
+
+<template>
+  <div id="loginSite">
+    <div id="loginForm">
+      <UFormGroup
+          label="Username:"
+      >
+        <UInput
+            v-model="username"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Passwort:"
+      >
+        <UInput
+            v-model="password"
+            type="password"
+        />
+      </UFormGroup>
+      <UButton
+          @click="onSubmit"
+          class="mt-3"
+      >
+        Einloggen
+      </UButton>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+#loginSite {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+}
+
+#loginForm {
+  width: 30vw;
+  height: 30vh;
+}
+</style>

spaces/pages/printing.vue

@@ -0,0 +1,69 @@
+<script setup>
+import * as JSPM from 'jsprintmanager'
+
+let printers = []
+
+
+const doPrintZPL = () => {
+  /*if(this.selected_printer === '' && !this.print2default) {
+    alert("You must select a printer");
+    return;
+  }*/
+  let cpj = new JSPM.ClientPrintJob();
+  /*if ( this.print2default ) {
+    cpj.clientPrinter = new JSPM.DefaultPrinter();
+  } else {
+    cpj.clientPrinter = new JSPM.InstalledPrinter(this.selected_printer);
+  }*/
+
+  cpj.clientPrinter = new JSPM.InstalledPrinter("ZebraZD230");
+  let cmds =  "^XA";
+  cmds += "^CF0,60";
+  cmds += "^FO20,10^BY4^BC,200,Y,N,,U^FD0012345123451234512^FS";
+  cmds += "^FO20,250^GB650,3,3^FS";
+  cmds += "^CFA,30";
+  cmds += "^FO20,300^FDFederspiel Technology UG^FS";
+  cmds += "^XZ";
+
+
+  cpj.printerCommands = cmds;
+  cpj.sendToClient();
+}
+
+
+
+const getPrinters = () =>  {
+  return new Promise((ok, err) => {
+    let printers = [];
+    if(JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open) {
+      JSPM.JSPrintManager.getPrinters().then(function (myPrinters) {
+        printers = myPrinters;
+        console.log(printers);
+        ok(printers);
+      }).catch((e)=>err(e));
+    } else { console.warn("JSPM WS not open"); ok(printers); }
+  });
+}
+const initJSPM = () => {
+  JSPM.JSPrintManager.auto_reconnect = true
+  JSPM.JSPrintManager.start();
+
+  JSPM.JSPrintManager.WS.onStatusChanged = () => {
+    console.log("Status Changed")
+    getPrinters().then(p => printers = p)
+  }
+}
+initJSPM()
+</script>
+
+<template>
+{{printers}}
+
+
+  <UButton @click="doPrintZPL">Print</UButton>
+
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/products.vue

@@ -0,0 +1,198 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <UButton @click="showCreateProduct = true" >+ Artikel</UButton>
+      <UModal v-model="showCreateProduct">
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            Artikel erstellen
+          </template>
+
+          <UFormGroup
+            label="Name:"
+          >
+            <UInput
+              v-model="createProductData.name"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Hersteller:"
+          >
+            <UInput
+                v-model="createProductData.manufacturer"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Einheit:"
+          >
+            <UInput
+                v-model="createProductData.unit"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton @click="createProduct">Erstellen</UButton>
+          </template>
+        </UCard>
+      </UModal>
+
+      <div class="listContainer">
+        <a v-for="item in products" @click="selectItem(item)">
+          <UCard class="listItem">
+            <UBadge>{{item.id}}</UBadge> {{item.attributes.name}} - {{item.attributes.manufacturer}}
+          </UCard>
+        </a>
+      </div>
+
+
+
+
+    </div>
+    <div id="right">
+      <div v-if="false">
+        <img
+            v-if="selectedItem.attributes.image"
+            :src="'http://localhost:1337' + selectedItem.attributes.image.data.attributes.url"/>
+        {{selectedItem.attributes.image.data.attributes.url}}
+      </div>
+
+      <UCard v-if="selectedItem.attributes">
+        <template #header>
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
+        </template>
+<!--        <UBadge
+          v-for="tag in selectedItem.tags"
+          class="mr-2"
+        >
+          {{tag}}
+        </UBadge>-->
+        <UDivider class="my-3"/>
+        <div v-if="selectedItem.attributes">
+          Hersteller: {{selectedItem.attributes.manufacturer}}<br>
+          Einkaufspreis: {{selectedItem.attributes.purchasePriceNet.toFixed(2)}} €<br>
+          Aufschlag: {{selectedItem.attributes.profitPercentage}} %<br>
+          Verkaufspreis: {{selectedItem.attributes.retailPriceNet.toFixed(2)}} €<br>
+        </div>
+
+        <UDivider class="my-3"/>
+        <p>Verlauf:</p>
+
+        <table>
+          <tr
+            v-for="item in history"
+            class="historyItem"
+          >
+            <td>
+              {{item.position}}
+            </td>
+            <td>
+              {{item.date}}
+            </td>
+            <td>
+              <UBadge>{{item.user}}</UBadge>
+            </td>
+            <td>
+              {{item.message}}
+            </td>
+
+          </tr>
+        </table>
+
+
+<!--        <div
+          v-for="item in history"
+          class="historyItem"
+        >
+          <p>{{item.message}}</p>
+          <UBadge>{{item.user}}</UBadge>
+        </div>-->
+
+
+
+      </UCard>        {{selectedItem}}
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const products = (await find('products',{populate: "*"})).data
+
+const showCreateProduct = ref(false)
+const createProductData = ref({})
+
+
+let selectedItem = ref({})
+
+const history = ref([
+  {
+    position: 0,
+    message: "Produkt erstellt",
+    date: "2023-11-20",
+    user: "flfeders"
+  }
+])
+
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  console.log(item)
+}
+
+const createProduct = async () => {
+  await create('products', createProductData.value)
+  showCreateProduct.value = false
+  createProductData.value = {}
+
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+  overflow: hidden;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+
+.listContainer {
+  height: 75vh;
+  overflow: auto;
+  margin-top: 3vh;
+}
+
+
+
+.historyItem >td {
+  border: 0.5px solid grey;
+  border-radius: 15px;
+  padding: 1em
+}
+
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.listContainer::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.listContainer {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+</style>

spaces/pages/projects/[id].vue

@@ -0,0 +1,150 @@
+<script setup >
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find, findOne,create, update} = useStrapi4()
+const route = useRoute()
+let project = (await findOne('projects',route.params.id)).data
+const tabItems = [
+  {
+    key: "phases",
+    label: "Phasen"
+  },{
+    key: "forms",
+    label: "Formulare"
+  }
+]
+const selectedPhase = ref({})
+const changesSaved = ref(true)
+
+
+const updatePhases = async () => {
+  await update('projects', route.params.id, {phases: project.attributes.phases})
+  changesSaved.value = true
+  console.log("Updated")
+}
+
+const phaseInfo = ref({
+  name: "XX",
+  notes: ""
+})
+
+const addPhase = async (phaseBefore) => {
+
+
+  let posBefore = phaseBefore.position
+  let phases = project.attributes.phases
+
+  phases.splice(posBefore + 1,0,{name: "test", checkboxes: []})
+
+  phases.forEach((phase,index) => {
+    phases[index].position = index
+  })
+
+
+  await updatePhases()
+
+}
+
+
+</script>
+
+<template>
+  <div id="main">
+    <div id="left">
+      <a
+          v-for="phase in project.attributes.phases"
+          @click="selectedPhase = phase"
+      >
+        <div
+            class="phaseContainer"
+        >
+          <span>{{phase.name}} - {{phase.position}}</span>
+        </div>
+
+        <a class="plusIcon" @click="addPhase(phase)">
+<!--          <UIcon name="i-heroicons-plus-circle" />-->
+          <UDivider icon="i-heroicons-plus-circle"/>
+        </a>
+      </a>
+
+    </div>
+    <div id="right" v-if="selectedPhase.name">
+      <h3>{{selectedPhase.name}}</h3>
+
+      <div
+        v-if="selectedPhase"
+      >
+        <UCheckbox
+            v-for="checkbox in selectedPhase.checkboxes"
+            v-model="checkbox.checked"
+            :label="checkbox.name"
+            v-on:change="updatePhases"
+        />
+      </div>
+
+      <UTextarea
+        v-model="selectedPhase.notes"
+        variant="outline"
+        color="primary"
+        placeholder="Notizen..."
+        class="notesTextarea"
+        v-on:change="changesSaved = false"
+      />
+
+      <UButton
+          v-if="!changesSaved"
+          @click="updatePhases"
+      >
+        Speichern
+      </UButton>
+
+      {{selectedPhase}}
+    </div>
+  </div>
+</template>
+
+<style >
+
+#main {
+  display: flex;
+  flex-direction: row;
+}
+
+#left {
+  width: 25vw;
+  height: 80vh;
+  overflow: auto;
+}
+
+#right {
+  width: 65vw;
+  margin-left: 2vw;
+}
+
+.phaseContainer {
+  border: 1px solid grey;
+  border-radius: 10px;
+  padding: 1em;
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
+
+.phaseContainer:hover {
+  border: 1px solid #69c350;
+}
+
+.notesTextarea {
+  margin-top: 1em
+}
+
+h3 {
+  color: #69c350;
+  font-size: larger;
+}
+
+.plusIcon:hover {
+  color: #69c350;
+}
+</style>

spaces/pages/projects/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <UButton @click="showCreateProject = true">+ Projekt</UButton>
+      <UModal v-model="showCreateProject">
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+
+        </UCard>
+      </UModal>
+
+      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
+        <UCard class="listItem">
+          <UBadge>{{item.id}}</UBadge> {{item.attributes.name}}
+        </UCard>
+      </router-link>
+
+
+    </div>
+    <div id="right">
+      {{selectedItem}}
+      <UCard v-if="selectedItem.id">
+        <template #header>
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
+        </template>
+
+        Kunde:<br>
+        {{selectedItem.attributes.customer.data.attributes.name}}<br>
+
+        Notizen: <br>
+        {{selectedItem.attributes.notes}}
+
+<!--        Lieferantenrechnungen: <br>
+        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
+        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}-->
+
+
+
+
+      </UCard>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const projects = (await find('projects',{populate: "*"})).data
+
+const showCreateProject = ref(false)
+const projectData = ref({})
+
+let selectedItem = ref({})
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  console.log(item)
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+</style>

spaces/pages/tasks.vue

@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <UModal
+        v-model="showCreateTask"
+    >
+      <UCard>
+        <template #header>
+          Aufgabe erstellen
+        </template>
+
+        <UFormGroup
+            label="Titel:"
+            class="mt-2"
+        >
+          <UInput
+              v-model="createTaskData.name"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Beschreibung:"
+            class="mt-2"
+        >
+          <UTextarea
+              v-model="createTaskData.description"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Kategorie:"
+            class="mt-2"
+        >
+          <USelectMenu
+              :options="taskCategories"
+              v-model="createTaskData.categorie"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Benutzer:"
+            class="mt-2"
+        >
+          <USelectMenu
+              :options="usersForList"
+              v-model="createTaskData.users"
+              multiple
+          />
+        </UFormGroup>
+
+
+        <template #footer>
+          <UButton
+              @click="createTask"
+          >
+            Erstellen
+          </UButton>
+        </template>
+
+      </UCard>
+    </UModal>
+
+    <UModal
+        v-model="showTaskModal"
+    >
+      <UCard>
+        <template #header>
+          {{taskData.attributes.name}}
+        </template>
+        <p>{{taskData.attributes.description}}</p>
+        <p>Erstellt am: {{taskData.attributes.createdAt}}</p>
+        <UBadge
+            v-for="user in taskData.attributes.users"
+            class="mr-2"
+        >
+          {{user}}
+        </UBadge>
+        <template #footer>
+          <UButton
+            @click="finishTask"
+          >
+            Erledigt
+          </UButton>
+        </template>
+      </UCard>
+    </UModal>
+
+    <div id="menuBar">
+      <UButton
+          class="mb-3 mr-3"
+          @click="showCreateTask = true"
+      >
+        + Aufgabe
+      </UButton>
+      <USelectMenu
+          :options="usersForList"
+          v-model="usersSelected"
+          multiple
+          placeholder="Benutzer"
+          class="w-40"
+          v-on:change="filterTasks"
+      >
+        <template #label>
+          <span v-if="usersSelected.length" class="truncate">{{ usersSelected.join(', ') }}</span>
+          <span v-else>Benutzer auswählen</span>
+        </template>
+      </USelectMenu>
+    </div>
+
+
+
+
+    <div id="taskCatList">
+      <div id="catNew">
+        <h3>Neue Aufgaben</h3>
+        <div class="taskScrollList">
+          <a
+              v-for="taskNew in refTasks.filter(task => task.attributes.categorie == 'Neu')"
+              @click="inspectTask(taskNew)"
+          >
+            <UCard class="listItem">
+              {{taskNew.attributes.name}}
+              <UBadge
+                  v-for="user in taskNew.attributes.users"
+                  class="mr-2"
+              >
+                {{user}}
+              </UBadge>
+            </UCard>
+          </a>
+
+        </div>
+
+
+      </div>
+      <div id="catInProgress">
+        <h3>Aufgaben in Bearbeitung</h3>
+        <div class="taskScrollList">
+          <a
+              v-for="taskNew in refTasks.filter(task => task.attributes.categorie == 'In Bearbeitung')"
+              @click="inspectTask(taskNew)"
+          >
+            <UCard class="listItem">
+              {{taskNew.attributes.name}}
+              <UBadge
+                  v-for="user in taskNew.attributes.users"
+                  class="mr-2"
+              >
+                {{user}}
+              </UBadge>
+            </UCard>
+          </a>
+        </div>
+
+      </div>
+      <div id="catUrgent">
+        <h3>Dringende Aufgaben</h3>
+        <div class="taskScrollList">
+          <a
+              v-for="taskNew in refTasks.filter(task => task.attributes.categorie == 'Dringend')"
+              @click="inspectTask(taskNew)"
+          >
+            <UCard class="listItem">
+              {{taskNew.attributes.name}}
+              <UBadge
+                  v-for="user in taskNew.attributes.users"
+                  class="mr-2"
+              >
+                {{user}}
+              </UBadge>
+            </UCard>
+          </a>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create, update} = useStrapi4()
+
+let tasks = (await find('tasks',{populate: "*"})).data
+
+let refTasks = ref([])
+
+
+const users = (await find('users',{populate: "*"}))
+let usersForList = []
+users.forEach(user => usersForList.push(user.username))
+const usersSelected = ref([])
+usersSelected.value = usersForList
+
+
+
+const showCreateTask = ref(false)
+const taskCategories = ["Neu","In Bearbeitung", "Dringend"]
+const createTaskData = ref({
+  name: "",
+  description: "",
+  categorie: "Neu",
+  users: []
+})
+
+const taskData = ref({})
+const showTaskModal = ref(false)
+
+const createTask = async () => {
+  await create('tasks', createTaskData.value)
+  showCreateTask.value = false
+  createTaskData.value = {}
+}
+
+const updateTask = async () => {
+  await update('tasks', taskData.value.id, taskData.value.attributes)
+
+}
+
+
+const inspectTask = (task) => {
+  taskData.value = task
+  showTaskModal.value = true
+}
+
+const filterTasks = () => {
+  refTasks.value = tasks.filter(task => usersSelected.value.some(user => (task.attributes.users ? (task.attributes.users.includes(user)) : true )))
+
+}
+
+const finishTask = () => {
+  taskData.value.attributes.categorie = "Erledigt"
+  updateTask()
+}
+
+filterTasks()
+
+</script>
+
+<style scoped>
+
+#main {
+
+}
+
+h3 {
+  font-size: large;
+  font-weight: bold;
+}
+
+#menuBar {
+  display: flex;
+  flex-direction: row;
+}
+
+#taskCatList {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 65vh;
+}
+
+.taskScrollList {
+  height: 60vh;
+  overflow: auto;
+  padding: 3px
+}
+
+#catNew {
+  width: 30%;
+}
+#catInProgress {
+  width: 30%;
+  border-left: 2px solid #69c350;
+  margin-left: 1em;
+  padding-left: 1em;
+
+}
+#catUrgent {
+  width: 30%;
+  border-left: 2px solid #69c350;
+  margin-left: 1em;
+  padding-left: 1em;
+}
+</style>

spaces/pages/timetracking.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: "auth"
+})
+</script>
+
+<template>
+    <div>
+      <UButton class="controlButton" disabled>
+        Start
+      </UButton>
+      <UButton class="controlButton" disabled>
+        Stop
+      </UButton>
+      <UButton class="controlButton" disabled>
+        Pause
+      </UButton>
+    </div>
+</template>
+
+<style scoped>
+.controlButton {
+  margin-right: 1em;
+}
+</style>

spaces/pages/vendorinvoices/edit.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="main">
+    <UFormGroup label="Lieferant:" required>
+        <UInput />
+    </UFormGroup>
+
+    <UFormGroup label="Rechnungsreferenz:" required>
+        <UInput />
+    </UFormGroup>
+
+    <UFormGroup label="Rechnungsdatum:" required>
+        <UInput />
+    </UFormGroup>
+
+    <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>
+
+
+    <div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
+      <UFormGroup label="Text:" required>
+        <UInput v-model="lineItem.text"/>
+      </UFormGroup>
+      <UFormGroup label="Produkt:" required>
+        <UInput v-model="lineItem.productId"/>
+      </UFormGroup>
+      <UFormGroup label="Projekt:" required>
+        <UInput v-model="lineItem.projectId"/>
+      </UFormGroup>
+      <UFormGroup label="Anzahl:" required>
+        <UInput v-model="lineItem.quantity"/>
+      </UFormGroup>
+      <UFormGroup label="Einheit:" required>
+        <UInput v-model="lineItem.unit"/>
+      </UFormGroup>
+      <UFormGroup label="Einzelpreis:" required>
+        <UInput v-model="lineItem.unitPriceNet"/>
+      </UFormGroup>
+      <UFormGroup label="USt:" required>
+        <UInput v-model="lineItem.vat"/>
+      </UFormGroup>
+      <UFormGroup label="Rabatt:" required>
+        <UInput v-model="lineItem.discount"/>
+      </UFormGroup>
+      <UFormGroup label="Buchungskonto:" required>
+        <UInput v-model="lineItem.skrAccountId"/>
+      </UFormGroup>
+      <UFormGroup label="Positionspreis:" required>
+        <UInput disabled/>
+      </UFormGroup>
+    </div>
+    {{vendorInvoiceData}}
+  </div>
+</template>
+
+<script setup>
+
+let vendorInvoiceData = ref({
+  reference: "",
+  date: "",
+  vendorId: 0,
+  lineItems: []
+})
+
+
+
+</script>
+
+<style scoped>
+.lineItemRow {
+  display: flex;
+  flex-direction: row;
+}
+</style>

spaces/pages/vendorinvoices/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <router-link to="/vendorinvoices/edit"><UButton>+ Lieferantenrechnung</UButton></router-link>
+
+
+
+      <a v-for="item in dataStore.getVendorInvoiceList" @click="selectItem(item)">
+        <UCard class="listItem">
+          <UBadge>{{item.id}}</UBadge> {{item.date}}
+        </UCard>
+      </a>
+
+
+
+    </div>
+    <div id="right">
+
+      <UCard v-if="selectedItem.id">
+        <template #header>
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
+        </template>
+        <UTable :rows="selectedItem.lineItems"></UTable>
+        {{selectedItem}}
+
+
+      </UCard>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import {useDataStore} from "../../store/data";
+import {storeToRefs} from "pinia"
+
+
+const showCreateProject = ref(false)
+const showCreateCustomer = ref(false)
+const projectData = ref({})
+
+
+const dataStore = useDataStore()
+
+const {projects} = storeToRefs(dataStore)
+const {addCustomer} = dataStore
+const {addProject} = dataStore
+let selectedItem = ref({})
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  console.log(item)
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+
+
+</style>