Introduced New Projecttypes and Phase Display

pages/projecttypes/[mode]/[[id]].vue

@@ -0,0 +1,292 @@
+<script setup>
+
+import { v4 as uuidv4 } from 'uuid';
+
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/projecttypes")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const openTab = ref(0)
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  initialPhases: []
+})
+const oldItemInfo = ref({})
+
+const openQuickActionModal = ref(false)
+const selectedKeyForQuickAction = ref("")
+
+const setupPage = async() => {
+
+  if(mode.value === "show" ){
+    itemInfo.value = await useSupabaseSelectSingle("projecttypes",route.params.id,"*")
+  } else if (mode.value === "edit") {
+    itemInfo.value = await useSupabaseSelectSingle("projecttypes",route.params.id,"*")
+  }
+
+  if(mode.value === "create") {
+    let query = route.query
+
+
+  }
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
+
+  setKeys()
+}
+
+setupPage()
+
+const setKeys = () => {
+    itemInfo.value.initialPhases = itemInfo.value.initialPhases.map(i => {
+      return {
+        ...i,
+        key: uuidv4(),
+        quickactions: i.quickactions || []
+      }
+    })
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/projecttypes`)"
+      >
+        Projekttypen
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          class="text-xl font-medium"
+      >{{itemInfo.name ? `Projekttyp: ${itemInfo.name}` : (mode === 'create' ? 'Projekttyp erstellen' : 'Projekttyp bearbeiten')}}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('projecttypes',itemInfo,oldItemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('projecttyes', itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="router.push(itemInfo.id ? `/projecttypes/show/${itemInfo.id}` : `/projecttypes`)"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/projecttypes/edit/${itemInfo.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UTabs
+        :items="[{label: 'Informationen'}]"
+        v-if="itemInfo.id && mode == 'show'"
+        v-model="openTab"
+    >
+      <template #item="{ item }">
+        <div v-if="item.label === 'Informationen'" class="flex flex-row">
+          <div class="w-1/2 mr-3">
+            <UCard class="mt-5">
+              {{itemInfo}}
+            </UCard>
+          </div>
+          <div class="w-1/2">
+            <UCard class="mt-5">
+              <HistoryDisplay
+                  type="project"
+                  v-if="itemInfo"
+                  :element-id="itemInfo.id"
+                  render-headline
+              />
+            </UCard>
+          </div>
+        </div>
+      </template>
+    </UTabs>
+
+    <UForm v-else-if="mode === 'edit' || mode === 'create'">
+      <UAlert
+          color="rose"
+          variant="outline"
+          class="mb-5"
+        description="Achtung Änderungen an diesem Projekttypen betreffen nur Projekte die damit neu erstellt werden. Bestehende Projekte bleiben unverändert."
+      />
+
+      <UFormGroup
+          label="Name:"
+      >
+        <UInput
+            v-model="itemInfo.name"
+        />
+      </UFormGroup>
+
+      <UDivider class="mt-5">
+        Initiale Phasen
+      </UDivider>
+      <UButton
+          class="mt-3"
+          @click="itemInfo.initialPhases.push({label: '', icon: ''}),
+                  setKeys"
+      >
+        + Phase
+      </UButton>
+
+      <table class="mt-3">
+        <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Icon</th>
+          <th>Optional</th>
+          <th>Beschreibung</th>
+          <th>Schnellaktionen</th>
+          <th></th>
+        </tr>
+        </thead>
+        <draggable
+            v-model="itemInfo.initialPhases"
+            handle=".handle"
+            tag="tbody"
+            itemKey="pos"
+            @end="setKeys"
+        >
+
+          <template #item="{element: phase}">
+            <tr>
+              <td>
+                <UIcon
+                    class="handle"
+                    name="i-mdi-menu"
+                />
+              </td>
+              <td>
+                <UInput
+                    class="my-2 ml-2"
+                    v-model="phase.label"
+                />
+              </td>
+              <td>
+                <UInput
+                    class="my-2 ml-2"
+                    v-model="phase.icon"
+                />
+              </td>
+              <td>
+                <UCheckbox
+                    class="my-2 ml-2"
+                    v-model="phase.optional"
+                />
+              </td>
+              <td>
+                <UInput
+                    class="my-2 ml-2"
+                    v-model="phase.description"
+                />
+              </td>
+              <td>
+                <UButton
+                    class="my-2 ml-2"
+                    variant="outline"
+                    @click="openQuickActionModal = true,
+                            selectedKeyForQuickAction = phase.key"
+                >+ Schnellaktion</UButton>
+                <UButton
+                  @click="phase.quickactions = phase.quickactions.filter(i => i.label !== button.label)"
+                  v-for="button in phase.quickactions"
+                  class="ml-1"
+                >
+                  {{ button.label }}
+                </UButton>
+
+                <UModal v-model="openQuickActionModal">
+                  <UCard>
+                    <div class="flex items-center justify-between">
+                      <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                        Schnellaktion hinzufügen
+                      </h3>
+                      <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
+                    </div>
+                    <div class="flex flex-col">
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
+
+                    </div>
+
+                  </UCard>
+                </UModal>
+              </td>
+              <td>
+                <UButton
+                    class="my-2 ml-2"
+                    variant="outline"
+                    color="rose"
+                    @click="itemInfo.initialPhases = itemInfo.initialPhases.filter(i => i !== phase)"
+                >X</UButton>
+              </td>
+            </tr>
+          </template>
+        </draggable>
+      </table>
+
+    </UForm>
+  </UDashboardPanelContent>
+
+
+</template>
+
+<style scoped>
+
+</style>

pages/projecttypes/index.vue

@@ -0,0 +1,108 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/projects/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/projecttypes/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+
+const router = useRouter()
+
+
+const items = ref([])
+const selectedItem = ref(0)
+
+
+const setup = async () => {
+    items.value = await useSupabaseSelect("projecttypes","*")
+}
+
+setup()
+
+const templateColumns = [
+  {
+    key: "name",
+    label: "Name"
+  },
+
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+const searchString = ref("")
+
+const filteredRows = computed(() => {
+  return useListFilter(searchString.value, items.value)
+})
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Projekttypen" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+
+      <UButton @click="router.push(`/projecttypes/create`)">+ Projekttyp</UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/projecttypes/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
+  >
+    <template #name-data="{row}">
+      <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{row.name}}</span>
+      <span v-else>{{row.name}}</span>
+    </template>
+
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>