Changes

2023-12-04 20:24:01 +01:00
parent 68a5775717
commit ef9105e286
9 changed files with 443 additions and 134 deletions
--- a/spaces/app.config.ts
+++ b/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'
+                }
+            }
+        }
+    }
+})
--- a/spaces/app.vue
+++ b/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,49 +121,117 @@ 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">
-    <template #header>
-      <div id="menu">
-        <router-link
-            v-for="link in navLinks"
-            :to="'/' + link.link"
-            class="mr-2"
-        >
-          <UButton>{{link.label}}</UButton>
-        </router-link>
-        <!--<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>-->
-        <UDropdown :items="userDropdownItems" :popper="{placement: 'bottom-start'}">
-          <UButton color="white" label="Benutzer" trailing-icon="i-heroicons-chevron-down-20-solid" />
-        </UDropdown>
-      </div>
-      <UBreadcrumb
-          class="my-3"
-          :links="linksForBreadcrumbs"
-      />
+  <UHeader :links="navLinks">
+    <template #right>
+      <UColorModeButton/>
    </template>
+  </UHeader>
+  <div class="m-3" id="contentContainer">
    <NuxtPage
-      v-if="loaded"
+        v-if="loaded"
    />
-    <div
-      v-else
-    >
-      <UProgress animation="carousel" />
-    </div>
-  </UCard>
+  </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.to"
+              class="mr-2"
+          >
+            <UButton>{{link.label}}</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>&ndash;&gt;
+          <UDropdown :items="userDropdownItems" :popper="{placement: 'bottom-start'}">
+            <UButton color="white" label="Benutzer" trailing-icon="i-heroicons-chevron-down-20-solid" />
+          </UDropdown>
+        </div>
+        <UBreadcrumb
+            class="my-3"
+            :links="linksForBreadcrumbs"
+        />
+      </template>
+      <NuxtPage
+          v-if="loaded"
+      />
+      <div
+          v-else
+      >
+        <UProgress animation="carousel" />
+      </div>
+    </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;
--- a/spaces/nuxt.config.ts
+++ b/spaces/nuxt.config.ts
@@ -1,29 +1,41 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
-  imports: {
-    dirs: ['stores']
-  },
-  modules: [
-    '@pinia/nuxt',
-      '@nuxt/ui',
-      '@nuxtjs/strapi',
-      '@nuxtjs/supabase',
-    "nuxt-editorjs"
-  ],
-  routeRules: {
-    '/printing': {ssr:false}
-
-  },
-  supabase: {
-    key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV3cHB2Y3hmbHJjc2lidXpzYmlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA5MzgxOTQsImV4cCI6MjAxNjUxNDE5NH0.CkxYSQH0uLfwx9GVUlO6AYMU2FMLAxGMrwEKvyPv7Oo",
-    url: "https://uwppvcxflrcsibuzsbil.supabase.co"
-  },
-  vite: {
-    optimizeDeps: {
-      include: ["@editorjs/editorjs"],
+    devtools: {enabled: true},
+    imports: {
+        dirs: ['stores']
+    },
+    extends: [
+        '@nuxt/ui-pro'
+    ],
+    modules: [
+        '@pinia/nuxt',
+        '@nuxt/ui',
+        '@nuxt/content',
+        '@nuxtjs/strapi',
+        '@nuxtjs/supabase',
+        "nuxt-editorjs",
+        '@nuxtjs/fontaine',
+        '@nuxtjs/google-fonts',
+    ],
+    routeRules: {
+        '/printing': {ssr: false}
+
+    },
+    supabase: {
+        key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV3cHB2Y3hmbHJjc2lidXpzYmlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA5MzgxOTQsImV4cCI6MjAxNjUxNDE5NH0.CkxYSQH0uLfwx9GVUlO6AYMU2FMLAxGMrwEKvyPv7Oo",
+        url: "https://uwppvcxflrcsibuzsbil.supabase.co"
+    },
+    vite: {
+        optimizeDeps: {
+            include: ["@editorjs/editorjs"],
+        },
+    },
+    ui: {
+        icons: ['heroicons']
+    },
+    colorMode: {
+        preference: 'dark'
    },
-  },


 })
--- a/spaces/package.json
+++ b/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",
--- a/spaces/pages/customers.vue
+++ b/spaces/pages/customers.vue
@@ -3,46 +3,28 @@
 <!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
    <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>
+      <UButton @click="mode = 'create'">+ Kunde</UButton>

-          <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>
+      <div class="scrollList">
+        <a v-for="item in customers" @click="selectItem(item)">
+          <UCard class="listItem">
+            <UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
+          </UCard>
+        </a>
+      </div>


-        </UCard>
-      </UModal>
-
-
-      <a v-for="item in customers" @click="selectItem(item)">
-        <UCard class="listItem">
-          <UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
-        </UCard>
-      </a>
-


    </div>
    <div id="right">
-
-      <UCard v-if="selectedItem.id">
+            <UCard v-if="selectedItem.id && mode == 'show'" >
        <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;
--- a/spaces/pages/documents.vue
+++ b/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 {
--- a/spaces/pages/login.vue
+++ b/spaces/pages/login.vue
@@ -1,4 +1,8 @@
 <script setup >
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const router = useRouter()
--- a/spaces/pages/projects/[id].vue
+++ b/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;
--- a/spaces/pages/tasks.vue
+++ b/spaces/pages/tasks.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-<!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
+  <UPage>
+    <!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
    <UModal
        v-model="showCreateTask"
    >
@@ -76,11 +76,16 @@
          {{user}}
        </UBadge>
        <template #footer>
-          <UButton
-            @click="finishTask"
+          <UFormGroup
+            label="Status ändern:"
          >
-            Erledigt
-          </UButton>
+            <USelectMenu
+                :options="taskCategories"
+                @change="updateTask"
+                v-model="taskData.categorie"
+            />
+          </UFormGroup>
+
        </template>
      </UCard>
    </UModal>
@@ -92,30 +97,31 @@
      >
        + 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>
+      <!--      <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>
+        <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)
-  console.log(error)
+
+  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()