Added Frontend

frontend/components/EntityShowSubPhases.vue

@@ -0,0 +1,169 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(["updateNeeded"]);
+
+const router = useRouter()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+
+const renderedPhases = computed(() => {
+  if(props.topLevelType === "projects" && props.item.phases) {
+    return props.item.phases.map((phase,index,array) => {
+
+      let isAvailable = false
+
+      if(phase.active) {
+        isAvailable = true
+      } else if(index > 0 && array[index-1].active ){
+        isAvailable = true
+      } else if(index > 1 && array[index-1].optional && array[index-2].active){
+        isAvailable = true
+      } else if(array.findIndex(i => i.active) > index) {
+        isAvailable = true
+      } else if(phase.label === "Abgeschlossen") {
+        isAvailable = true
+      }
+
+
+      return {
+        ...phase,
+        label: phase.optional ? `${phase.label}(optional)`: phase.label,
+        disabled: !isAvailable,
+        defaultOpen: phase.active ? true : false
+      }
+    })
+  } else {
+    return []
+  }
+})
+
+const changeActivePhase = async (key) => {
+  let item = await useEntities("projects").selectSingle(props.item.id,'*')
+
+  let phaseLabel = ""
+
+  item.phases = item.phases.map(p => {
+    if(p.active) p.active = false
+
+    if(p.key === key) {
+      p.active = true
+      p.activated_at = dayjs().format()
+      p.activated_by = profileStore.activeProfile.id
+      phaseLabel = p.label
+    }
+
+    return p
+  })
+
+  const res = await useEntities("projects").update(item.id, {phases:item.phases,active_phase: item.phases.find(i => i.active).label})
+
+  //const {error:updateError} = await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
+
+
+
+  /*const {error} = await supabase.from("historyitems").insert({
+    createdBy: profileStore.activeProfile.id,
+    tenant: profileStore.currentTenant,
+    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
+    project: item.id
+  })*/
+
+  emit("updateNeeded")
+
+}
+
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Phasen</span>
+    </template>
+    <UAccordion
+        :items="renderedPhases"
+    >
+      <template #default="{item,index,open}">
+        <UButton
+            variant="ghost"
+            :color="item.active ? 'primary' : 'white'"
+            class="mb-1"
+            :disabled="true"
+        >
+          <template #leading>
+            <div class="w-6 h-6  flex items-center justify-center -my-1">
+              <UIcon :name="item.icon" class="w-4 h-4 " />
+            </div>
+          </template>
+
+          <span class="truncate"> {{item.label}}</span>
+
+          <template #trailing>
+            <UIcon
+                name="i-heroicons-chevron-right-20-solid"
+                class="w-5 h-5 ms-auto transform transition-transform duration-200"
+                :class="[open && 'rotate-90']"
+            />
+          </template>
+
+        </UButton>
+      </template>
+      <template #item="{item, index}">
+        <UCard class="mx-5">
+          <template #header>
+            <span class="dark:text-white text-black">{{item.label}}</span>
+          </template>
+          <InputGroup>
+            <!-- TODO: Reactive Change Phase                  -->
+            <UButton
+                v-if="!item.activated_at && index !== 0 "
+                @click="changeActivePhase(item.key)"
+            >
+              Phase aktivieren
+            </UButton>
+            <UButton
+                v-if="item.active"
+                v-for="button in item.quickactions"
+                @click="router.push(`${button.link}&${props.queryStringData}`)"
+            >
+              {{button.label}}
+            </UButton>
+          </InputGroup>
+
+          <div>
+            <p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
+            <p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
+            <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
+          </div>
+        </UCard>
+
+
+      </template>
+    </UAccordion>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>