Corrected Empty Slot for Tables

spaces/pages/contracts/index.vue

@@ -17,7 +17,7 @@
         :rows="filteredRows"
         :columns="itemColumns"
         @select="selectItem"
-
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
       <template #customer-data="{row}">
         {{customers.find(customer => customer.id === row.customer) ? customers.find(customer => customer.id === row.customer).name : row.customer }}

spaces/pages/customers/index.vue

@@ -18,6 +18,7 @@
         :columns="customerColumns"
         @select="selectCustomer"
 
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     />
 
   </div>

spaces/pages/inventory/spaces/index.vue

@@ -16,7 +16,7 @@
         :rows="filteredRows"
         :columns="itemColumns"
         @select="selectItem"
-
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     />
 
 

spaces/pages/jobs/index.vue

@@ -7,7 +7,7 @@
         :rows="jobs"
         :columns="columns"
         @select="selectJob"
-
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     />
 
   </div>

spaces/pages/products/index.vue

@@ -16,6 +16,7 @@
       :rows="filteredRows"
       :columns="itemColumns"
       @select="selectItem"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
       <template #tags-data="{row}">
         <UBadge

spaces/pages/tasks.vue

@@ -124,6 +124,7 @@
      :rows="filteredRows"
      :columns="taskColumns"
      @select="inspectTask"
+     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
    >
      <template #created_at-data="{row}">
        {{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}

spaces/pages/timetracking.vue

@@ -24,6 +24,18 @@ const timeInfo = ref({
   type: null
 })
 
+const filteredRows = computed(() => {
+
+  if(user.value && times.value) {
+    return times.value.filter(time => time.user === user.value.id)
+  } else {
+    return []
+  }
+
+})
+
+
+
 const createTimeInfo = ref({
   user: "",
   start: new Date(),
@@ -65,13 +77,9 @@ const columns = [
   }
 ]
 
-const runningTimeInfo = ref({
+const runningTimeInfo = ref({})
-
-})
 const showAddTimeModal = ref(false)
-const addTimeInfo = ref({
 
-})
 
 
 const startTime = async () => {
@@ -160,217 +168,200 @@ const selectStartedTime = () => {
 </script>
 
 <template>
-    <div>
+  <div class="flex items-center gap-1">
-      <UButton
+    <UButton
-          class="controlButton"
+        class="controlButton"
-          @click="startTime"
+        @click="startTime"
-          :disabled="runningTimeInfo.id"
+        :disabled="runningTimeInfo.id"
-      >
+    >
-        Start
+      Start
-      </UButton>
+    </UButton>
-      <UButton
+    <UButton
-          class="controlButton"
+        class="controlButton"
-          @click="stopStartedTime"
+        @click="stopStartedTime"
-          :disabled="!runningTimeInfo.id"
+        :disabled="!runningTimeInfo.id"
-      >
+    >
-        Stop
+      Stop
-      </UButton>
+    </UButton>
-      <!--<UButton
+    <UButton
-          class="controlButton"
+        class="controlButton"
-          @click="selectStartedTime"
+        @click="showAddTimeModal = true"
-      >
+    >
-        Zeit Wählen
+      Erstellen
-      </UButton>-->
+    </UButton>
-      <UButton
+  </div>
-          class="controlButton"
-          @click="showAddTimeModal = true"
-      >
-        Erstellen
-      </UButton>
 
-      <UModal
+  <div v-if="runningTimeInfo.id" class="mt-3">
-        v-model="showAddTimeModal"
+
+    Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
+
+    <UFormGroup
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="runningTimeInfo.notes"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Projekt:"
+    >
+      <USelectMenu
+          :options="projects"
+          option-attribute="name"
+          value-attribute="id"
+          v-model="runningTimeInfo.projectId"
       >
-        <UCard>
+        <template #label>
-          <template #header>
+          {{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
-            Zeiteintrag erstellen
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+    <UFormGroup
+        label="Kategorie:"
+    >
+      <USelectMenu
+          v-model="runningTimeInfo.type"
+          :options="timeTypes"
+          option-attribute="label"
+          value-attribute="label"
+      >
+        <template #label>
+          {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+  </div>
+
+  <UModal
+      v-model="showAddTimeModal"
+  >
+    <UCard>
+      <template #header>
+        Zeiteintrag erstellen
+      </template>
+
+      <UFormGroup
+          label="Start:"
+      >
+        <VueDatePicker
+            v-model="createTimeInfo.start"
+            locale="de"
+            cancel-text="Abbrechen"
+            select-text="Auswählen"
+            now-button-label="Jetzt"
+            text-input="MM.dd.yyyy HH:mm"
+            :dark="useColorMode().value !== 'light'"
+            :format="format"
+            :preview-format="format"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Ende:"
+      >
+        <VueDatePicker
+            v-model="createTimeInfo.end"
+            locale="de"
+            cancel-text="Abbrechen"
+            select-text="Auswählen"
+            now-button-label="Jetzt"
+            text-input="MM.dd.yyyy HH:mm"
+            :dark="useColorMode().value !== 'light'"
+            :format="format"
+            :preview-format="format"
+        />
+      </UFormGroup>
+      <!--          <UFormGroup
+                  label="Dauer:"
+                >
+                  <UInput
+
+                  />
+                </UFormGroup>-->
+      <UFormGroup
+          label="Benutzer:"
+      >
+        <USelectMenu
+            :options="profiles"
+            v-model="createTimeInfo.user"
+            option-attribute="firstName"
+            value-attribute="id"
+        >
+          <template #label>
+            {{profiles.find(profile => profile.id === createTimeInfo.user) ? profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
           </template>
-
+        </USelectMenu>
-          <UFormGroup
+      </UFormGroup>
-            label="Start:"
+      <UFormGroup
-          >
+          label="Projekt:"
-            <VueDatePicker
-                v-model="createTimeInfo.start"
-                locale="de"
-                cancel-text="Abbrechen"
-                select-text="Auswählen"
-                now-button-label="Jetzt"
-                text-input="MM.dd.yyyy HH:mm"
-                :dark="useColorMode().value !== 'light'"
-                :format="format"
-                :preview-format="format"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Ende:"
-          >
-            <VueDatePicker
-                v-model="createTimeInfo.end"
-                locale="de"
-                cancel-text="Abbrechen"
-                select-text="Auswählen"
-                now-button-label="Jetzt"
-                text-input="MM.dd.yyyy HH:mm"
-                :dark="useColorMode().value !== 'light'"
-                :format="format"
-                :preview-format="format"
-            />
-          </UFormGroup>
-<!--          <UFormGroup
-            label="Dauer:"
-          >
-            <UInput
-
-            />
-          </UFormGroup>-->
-          <UFormGroup
-            label="Benutzer:"
-          >
-            <USelectMenu
-              :options="profiles"
-              v-model="createTimeInfo.user"
-              option-attribute="firstName"
-              value-attribute="id"
-            >
-              <template #label>
-                {{profiles.find(profile => profile.id === createTimeInfo.user) ? profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-            label="Projekt:"
-          >
-            <USelectMenu
-              :options="projects"
-              v-model="createTimeInfo.projectId"
-              option-attribute="name"
-              value-attribute="id"
-            >
-              <template #label>
-                {{projects.find(project => project.id === createTimeInfo.projectId) ? projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-            label="Typ:"
-          >
-            <USelectMenu
-                v-model="runningTimeInfo.type"
-                :options="timeTypes"
-                option-attribute="label"
-                value-attribute="label"
-            >
-              <template #label>
-                {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-            label="Notizen:"
-          >
-            <UTextarea
-              v-model="createTimeInfo.notes"
-            />
-          </UFormGroup>
-
-
-          <template #footer>
-            <UButton
-              @click="createTime"
-            >
-              Erstellen
-            </UButton>
-          </template>
-        </UCard>
-      </UModal>
-
-      <div>
-
-
-
-        <div v-if="runningTimeInfo.id" class="mt-3">
-
-          Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
-
-          <UFormGroup
-              label="Notizen:"
-          >
-            <UTextarea
-                v-model="runningTimeInfo.notes"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-              label="Projekt:"
-          >
-            <USelectMenu
-                :options="projects"
-                option-attribute="name"
-                value-attribute="id"
-                v-model="runningTimeInfo.projectId"
-            >
-              <template #label>
-                {{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-
-          <UFormGroup
-              label="Kategorie:"
-          >
-            <USelectMenu
-                v-model="runningTimeInfo.type"
-                :options="timeTypes"
-                option-attribute="label"
-                value-attribute="label"
-            >
-              <template #label>
-                {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-        </div>
-
-
-
-
-
-      </div>
-
-      <UDivider class="mt-3"/>
-
-      <UTable
-          class="mt-3"
-          v-if="times && user"
-          :columns="columns"
-          :rows="times.filter(time => time.user === user.id)"
       >
-        <template #user-data="{row}">
+        <USelectMenu
-          {{profiles.find(profile => profile.id === row.user) ? profiles.find(profile => profile.id === row.user).firstName + " " + profiles.find(profile => profile.id === row.user).lastName : row.user }}
+            :options="projects"
-        </template>
+            v-model="createTimeInfo.projectId"
+            option-attribute="name"
+            value-attribute="id"
+        >
+          <template #label>
+            {{projects.find(project => project.id === createTimeInfo.projectId) ? projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Typ:"
+      >
+        <USelectMenu
+            v-model="runningTimeInfo.type"
+            :options="timeTypes"
+            option-attribute="label"
+            value-attribute="label"
+        >
+          <template #label>
+            {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Notizen:"
+      >
+        <UTextarea
+            v-model="createTimeInfo.notes"
+        />
+      </UFormGroup>
 
-        <template #start-data="{row}">
-          {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
-        </template>
-        <template #end-data="{row}">
-          {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
-        </template>
-        <template #projectId-data="{row}">
-          {{projects.find(project => project.id === row.projectId) ? projects.find(project => project.id === row.projectId).name : ""}}
-        </template>
-      </UTable>
 
-    </div>
+      <template #footer>
+        <UButton
+            @click="createTime"
+        >
+          Erstellen
+        </UButton>
+      </template>
+    </UCard>
+  </UModal>
+
+  <UDivider class="mt-3"/>
+
+  <UTable
+      class="mt-3"
+      :columns="columns"
+      :rows="filteredRows"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+  >
+    <template #user-data="{row}">
+      {{profiles.find(profile => profile.id === row.user) ? profiles.find(profile => profile.id === row.user).firstName + " " + profiles.find(profile => profile.id === row.user).lastName : row.user }}
+    </template>
+
+    <template #start-data="{row}">
+      {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+    </template>
+    <template #end-data="{row}">
+      {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+    </template>
+    <template #projectId-data="{row}">
+      {{projects.find(project => project.id === row.projectId) ? projects.find(project => project.id === row.projectId).name : ""}}
+    </template>
+  </UTable>
 </template>
 
 <style scoped>

spaces/pages/vendorinvoices/index.vue

@@ -16,7 +16,7 @@
         :rows="filteredRows"
         :columns="itemColumns"
         @select="selectItem"
-
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     />
 
 

spaces/pages/vendors/index.vue

@@ -17,7 +17,7 @@
         :rows="filteredRows"
         :columns="itemColumns"
         @select="selectItem"
-
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     />
 
   </div>

spaces/stores/data.ts

@@ -133,7 +133,7 @@ export const useDataStore = defineStore('data', {
         },
         async fetchVendors() {
             // @ts-ignore
-            this.vendors = (await supabase.from("vendors").select()).data
+            this.vendors = (await supabase.from("vendors").select().order('vendorNumber',{ascending: true})).data
         },
         async fetchVendorInvoices() {
             // @ts-ignore