Changes

spaces/app.config.ts

@@ -0,0 +1,38 @@
+export default defineAppConfig({
+    ui: {
+        primary: 'green',
+        gray: 'slate',
+        tooltip: {
+            background: '!bg-background'
+        },
+        variables: {
+            dark: {
+                background: 'var(--color-gray-950)'
+            },
+            header: {
+                height: '5rem'
+            }
+        },
+        notifications: {
+            // Show toasts at the top right of the screen
+            position: 'top-0 bottom-auto'
+        },
+        icons: {
+            /*dark: 'i-ph-moon-duotone',
+            light: 'i-ph-sun-duotone',
+            search: 'i-ph-magnifying-glass-duotone',
+            external: 'i-ph-arrow-up-right',
+            chevron: 'i-ph-caret-down',
+            hash: 'i-ph-hash-duotone'*/
+        },
+        header: {
+            wrapper: 'lg:mb-0 lg:border-0',
+            popover: {
+                links: {
+                    active: 'dark:bg-gray-950/50',
+                    inactive: 'dark:hover:bg-gray-950/50'
+                }
+            }
+        }
+    }
+})

spaces/app.vue

@@ -19,46 +19,46 @@ fetchData()
 const navLinks = [
   {
     label: "Home",
-    link: "",
+    to: "/",
     icon: 'i-heroicons-home'
   },
   {
     label: "Aufgaben",
-    link: "tasks",
+    to: "/tasks",
     icon: "i-heroicons-rectangle-stack"
   },
   {
     label: "Plantafel",
-    link: "planningBoard",
+    to: "/planningBoard",
     icon: "i-heroicons-calendar-days"
   },
   {
     label: "Kunden",
-    link: "customers",
+    to: "/customers",
     icon: "i-heroicons-user-group"
   },
   {
     label: "Projekte",
-    link: "projects",
+    to: "/projects",
     icon: "i-heroicons-clipboard-document-check"
   },
   {
     label: "Zeiterfassung",
-    link: "timetracking",
+    to: "/timetracking",
     icon: "i-heroicons-clock"
   },
   {
     label: "Artikel",
-    link: "products"
+    to: "/products"
   },
   {
     label: "Dokumente",
-    link: "documents",
+    to: "/documents",
     icon: "i-heroicons-document"
   },
   {
     label: "Inventar",
-    link: "inventory"
+    to: "/inventory"
   }
 ]
 
@@ -121,28 +121,75 @@ const userDropdownItems = [
       }
     ]
 ]
+
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'de'
+  }
+})
+
+useSeoMeta({
+  ogSiteName: 'spaces.software',
+  twitterCard: 'summary_large_image'
+})
+
+
 </script>
 
 <template>
-  <UCard id="page">
+  <UHeader :links="navLinks">
+    <template #right>
+      <UColorModeButton/>
+    </template>
+  </UHeader>
+  <div class="m-3" id="contentContainer">
+    <NuxtPage
+        v-if="loaded"
+    />
+  </div>
+<!--  <UFooter>
+    <template #left>
+      <p class="text-gray-500 dark:text-gray-400 text-sm">
+        Copyright © 2023-{{ new Date().getFullYear() }} <NuxtLink class="hover:underline" to="https://federspiel.tech" target="_blank">
+        Federspiel Technolog UG haftungsbeschränkt
+      </NuxtLink>
+      </p>
+    </template>
+
+    <template #right>
+
+    </template>
+  </UFooter>-->
+
+
+  <UNotifications/>
+
+<!--    <UCard id="page">
       <template #header>
         <div id="menu">
           <router-link
               v-for="link in navLinks"
-            :to="'/' + link.link"
+              :to="link.to"
               class="mr-2"
           >
             <UButton>{{link.label}}</UButton>
           </router-link>
-        <!--<router-link to="/customers" class="mr-2"><UButton>Kunden</UButton></router-link>
+          &lt;!&ndash;<router-link to="/customers" class="mr-2"><UButton>Kunden</UButton></router-link>
           <router-link to="/projects" class="mr-2"><UButton>Projekte</UButton></router-link>
--
+  -
           <router-link to="/vendorinvoices" class="mr-2"><UButton>Eingangsrechnungen</UButton></router-link>
 
           <router-link to="/timetracking" class="mr-2"><UButton>Zeiterfassung</UButton></router-link>
           <router-link to="/products" class="mr-2"><UButton>Artikel</UButton></router-link>
           <router-link to="/documents" class="mr-2"><UButton>Dokumente</UButton></router-link>
-        <router-link to="/inventory" class="mr-2"><UButton>Inventar</UButton></router-link>-->
+          <router-link to="/inventory" class="mr-2"><UButton>Inventar</UButton></router-link>&ndash;&gt;
           <UDropdown :items="userDropdownItems" :popper="{placement: 'bottom-start'}">
             <UButton color="white" label="Benutzer" trailing-icon="i-heroicons-chevron-down-20-solid" />
           </UDropdown>
@@ -160,10 +207,31 @@ const userDropdownItems = [
       >
         <UProgress animation="carousel" />
       </div>
-  </UCard>
+    </UCard>-->
+
+
+
 </template>
 
-<style >
+<style>
+
+#contentContainer {
+  width: 95vw;
+  height: 85vh;
+}
+
+.scrollList {
+  overflow-y: scroll;
+  height: 85vh;
+  margin-top: 1em;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.scrollList::-webkit-scrollbar {
+  display: none;
+}
+
 
   #page {
     width: 98vw;

spaces/nuxt.config.ts

@@ -1,18 +1,24 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+    devtools: {enabled: true},
     imports: {
         dirs: ['stores']
     },
+    extends: [
+        '@nuxt/ui-pro'
+    ],
     modules: [
         '@pinia/nuxt',
         '@nuxt/ui',
+        '@nuxt/content',
         '@nuxtjs/strapi',
         '@nuxtjs/supabase',
-    "nuxt-editorjs"
+        "nuxt-editorjs",
+        '@nuxtjs/fontaine',
+        '@nuxtjs/google-fonts',
     ],
     routeRules: {
-    '/printing': {ssr:false}
+        '/printing': {ssr: false}
 
     },
     supabase: {
@@ -24,6 +30,12 @@ export default defineNuxtConfig({
             include: ["@editorjs/editorjs"],
         },
     },
+    ui: {
+        icons: ['heroicons']
+    },
+    colorMode: {
+        preference: 'dark'
+    },
 
 
 })

spaces/package.json

@@ -23,7 +23,10 @@
     "@fullcalendar/resource": "^6.1.10",
     "@fullcalendar/resource-timeline": "^6.1.10",
     "@fullcalendar/vue3": "^6.1.10",
-    "@nuxt/ui": "^2.11.0",
+    "@nuxt/content": "^2.9.0",
+    "@nuxt/ui-pro": "^0.5.0",
+    "@nuxtjs/fontaine": "^0.4.1",
+    "@nuxtjs/google-fonts": "^3.1.0",
     "@nuxtjs/strapi": "^1.9.3",
     "@pinia/nuxt": "^0.5.1",
     "@vicons/ionicons5": "^0.12.0",

spaces/pages/customers.vue

@@ -3,46 +3,28 @@
 <!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
     <div id="left">
 
-      <UButton @click="showCreateCustomer = true">+ Kunde</UButton>
+      <UButton @click="mode = 'create'">+ 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>
-
 
+      <div class="scrollList">
         <a v-for="item in customers" @click="selectItem(item)">
           <UCard class="listItem">
             <UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
           </UCard>
         </a>
+      </div>
+
 
 
 
     </div>
     <div id="right">
-
+            <UCard v-if="selectedItem.id && mode == 'show'" >
-      <UCard v-if="selectedItem.id">
         <template #header>
           <UBadge>{{selectedItem.customerNumber}}</UBadge> {{selectedItem.name}}
         </template>
 
+        {{selectedItem.infoData}}<br>
+
         Kontakte:<br>
 <!--        <ul>
           <li v-for="contact in selectedItem.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
@@ -56,9 +38,138 @@
 
         <br><br>
 
+        <template #footer>
+          <UButton
+              v-if="mode == 'show' && selectedItem.id"
+              @click="editCustomer"
+          >
+            Bearbeiten
+          </UButton>
+          <UButton
+              @click="cancelEditorCreate"
+              color="red"
+              class="ml-2"
+              disabled
+          >
+            Archivieren
+          </UButton>
+<!-- TODO: Kunde archivieren          -->
+        </template>
 
 
-<!-- TODO: Scrollcontainer      -->
+
+      </UCard>
+      <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+        <template #header>
+          <UBadge>{{customerInfo.customerNumber}}</UBadge> {{customerInfo.name}}
+        </template>
+
+        <UFormGroup
+          label="Name:"
+        >
+          <UInput
+            v-model="customerInfo.name"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+          label="Kundennummer:"
+        >
+          <UInput
+            v-model="customerInfo.customerNumber"
+          />
+        </UFormGroup>
+
+        <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
+          <UFormGroup
+              label="Kunde aktiv:"
+          >
+            <UCheckbox
+                v-model="customerInfo.active"
+            />
+          </UFormGroup>
+        </UTooltip>
+        <UFormGroup
+          label="Notizen:"
+        >
+          <UTextarea
+            v-model="customerInfo.notes"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+          label="Straße + Hausnummer"
+        >
+          <UInput
+            v-model="customerInfo.infoData.street"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Postleitzahl"
+        >
+          <UInput
+              v-model="customerInfo.infoData.zip"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Ort"
+        >
+          <UInput
+            v-model="customerInfo.infoData.city"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+          label="Telefon:"
+        >
+          <UInput
+              v-model="customerInfo.infoData.tel"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="E-Mail:"
+        >
+          <UInput
+              v-model="customerInfo.infoData.email"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Webseite:"
+        >
+          <UInput
+              v-model="customerInfo.infoData.web"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="USt-Id:"
+        >
+          <UInput
+              v-model="customerInfo.infoData.ustid"
+          />
+        </UFormGroup>
+
+        <template #footer>
+          <UButton
+              v-if="mode == 'edit'"
+              @click="updateCustomer"
+          >
+            Speichern
+          </UButton>
+          <UButton
+              v-else-if="mode == 'create'"
+              @click="createCustomer"
+          >
+            Erstellen
+          </UButton>
+          <UButton
+              @click="cancelEditorCreate"
+              color="red"
+              class="ml-2"
+          >
+            Abbrechen
+          </UButton>
+        </template>
+
       </UCard>
     </div>
   </div>
@@ -70,7 +181,7 @@ definePageMeta({
 })
 
 const supabase = useSupabaseClient()
-
+const toast = useToast()
 const {customers } = storeToRefs(useDataStore())
 const {fetchCustomers} = useDataStore()
 
@@ -78,17 +189,19 @@ const {fetchCustomers} = useDataStore()
 let showCreateCustomer = ref(false)
 let customerInfo = ref({
   name: "",
-  customerNumber: 0
+  customerNumber: 0,
+  infoData: {}
 })
 
-
+const mode = ref("show")
 let selectedItem = ref({})
 
 const selectItem = (item) => {
   selectedItem.value = item
+  window.scrollTo(0,0)
 }
 
-const createCustomer = async () => {
+/*const createCustomer = async () => {
   //await create('customers', customerInfo.value)
   const {data,error} = await supabase
       .from("customers")
@@ -101,8 +214,50 @@ const createCustomer = async () => {
   customerInfo.value = {}
   showCreateCustomer.value = false
   fetchCustomers()
+}*/
+
+
+const createCustomer = async () => {
+  const {error} = await supabase
+      .from("customers")
+      .insert([customerInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    toast.add({title: "Kunde erfolgreich erstellt"})
+    fetchCustomers()
+  }
 }
 
+const editCustomer = async () => {
+  mode.value = 'edit';
+  customerInfo.value = selectedItem.value
+}
+
+const cancelEditorCreate = () => {
+  mode.value = "show"
+  customerInfo.value = {
+    id: 0,
+    name: "",
+    infoData: {}
+  }
+}
+
+const updateCustomer = async () => {
+  const {error} = await supabase
+      .from("customers")
+      .update(customerInfo.value)
+      .eq('id',customerInfo.value.id)
+  console.log(error)
+  mode.value = "show"
+  toast.add({title: "Kunde erfolgreich gespeichert"})
+  fetchCustomers()
+}
+
+
 </script>
 
 <style scoped>
@@ -112,8 +267,11 @@ const createCustomer = async () => {
 }
 #left {
   width: 25vw;
+
 }
 
+
+
 #right {
   width: 60vw;
   padding-left: 3vw;

spaces/pages/documents.vue

@@ -262,6 +262,8 @@ const openDocument = async (document) => {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  height: 85vh;
+  overflow-y: scroll;
 }
 
 .documentListItem {

spaces/pages/login.vue

@@ -1,4 +1,8 @@
 <script setup >
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const router = useRouter()

spaces/pages/projects/[id].vue

@@ -58,6 +58,9 @@ const tabItems = [
   },{
     key: "timetracking",
     label: "Zeiterfassung"
+  },{
+    key: "material",
+    label: "Material"
   }
 ]
 const selectedPhase = ref({})
@@ -142,7 +145,8 @@ const phaseInfo = ref({
     <UTabs :items="tabItems" class="w-full">
       <template #item="{ item }">
         <div v-if="item.key === 'phases'" class="space-y-3">
-          <div id="phaseList">
+          <p>Hier wird aktuell noch gearbeitet</p>
+          <!--          <div id="phaseList">
             <a
                 v-for="phase in []"
                 @click="selectedPhase = phase"
@@ -158,7 +162,7 @@ const phaseInfo = ref({
                 <UDivider icon="i-heroicons-plus-circle"/>
               </a>
             </a>
-          </div>
+          </div>-->
 
         </div>
         <div v-else-if="item.key === 'forms'" class="space-y-3">
@@ -222,7 +226,12 @@ const phaseInfo = ref({
           </UButton>
           <client-only><editor-js v-model="newProjectDescription" /></client-only>
         </div>
-        {{item}}
+        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
+          <p>Hier wird aktuell noch gearbeitet</p>
+        </div>
+        <div v-else-if="item.key === 'material'" class="space-y-3">
+          <p>Hier wird aktuell noch gearbeitet</p>
+        </div>
       </template>
     </UTabs>
 <!--    <div id="left">
@@ -278,7 +287,7 @@ const phaseInfo = ref({
   </div>
 </template>
 
-<style >
+<style scoped>
 
 #main {
   display: flex;

spaces/pages/tasks.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <UPage>
-<!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
+    <!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
     <UModal
         v-model="showCreateTask"
     >
@@ -76,11 +76,16 @@
           {{user}}
         </UBadge>
         <template #footer>
-          <UButton
+          <UFormGroup
-            @click="finishTask"
+            label="Status ändern:"
           >
-            Erledigt
+            <USelectMenu
-          </UButton>
+                :options="taskCategories"
+                @change="updateTask"
+                v-model="taskData.categorie"
+            />
+          </UFormGroup>
+
         </template>
       </UCard>
     </UModal>
@@ -92,7 +97,7 @@
       >
         + Aufgabe
       </UButton>
-      <USelectMenu
+      <!--      <USelectMenu
                 :options="usersForList"
                 v-model="usersSelected"
                 multiple
@@ -104,18 +109,19 @@
                 <span v-if="usersSelected.length" class="truncate">{{ usersSelected.join(', ') }}</span>
                 <span v-else>Benutzer auswählen</span>
               </template>
-      </USelectMenu>
+            </USelectMenu>-->
     </div>
 
 
 
 
+
     <div id="taskCatList">
       <div id="catNew">
-        <h3>Neue Aufgaben</h3>
+        <h3>Offene Aufgaben</h3>
         <div class="taskScrollList" v-if="tasks.length > 0">
           <a
-              v-for="taskNew in tasks.filter(task => task.categorie == 'Neu')"
+              v-for="taskNew in tasks.filter(task => task.categorie == 'Offen')"
               @click="inspectTask(taskNew)"
           >
             <UCard class="listItem">
@@ -174,16 +180,16 @@
 
       </div>
     </div>
-  </div>
+  </UPage>
 </template>
 
 <script setup>
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
-
+const toast = useToast()
 const supabase = useSupabaseClient()
 const {tasks} = storeToRefs(useDataStore())
 const {fetchTasks} = useDataStore()
@@ -199,7 +205,7 @@ usersSelected.value = usersForList
 
 
 const showCreateTask = ref(false)
-const taskCategories = ["Neu","In Bearbeitung", "Dringend"]
+const taskCategories = ["Offen","In Bearbeitung", "Dringend"]
 const createTaskData = ref({
   name: "",
   description: "",
@@ -225,15 +231,23 @@ const createTask = async () => {
 }
 
 const updateTask = async () => {
-  //await update('tasks', taskData.value.id, taskData.value)
+
   console.log(taskData.value)
   const {data,error} = await supabase
       .from("tasks")
-      .update({categorie: taskData.value.categorie})
+      .update(taskData.value)
       .eq('id',taskData.value.id)
       .select()
   console.log(data)
+
+  if(error) {
     console.log(error)
+  } else {
+    toast.add({title: "Aufgabe aktualisiert"})
+    taskData.value = {}
+    showTaskModal.value = false
+    fetchTasks()
+  }
 
 }
 
@@ -257,6 +271,7 @@ const finishTask = async () => {
   //console.log(data)
   console.log(error)
   showTaskModal.value = false
+  fetchTasks()
 }
 
 //filterTasks()