..

webapp/src/components/FabBreadcrumb.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="my-auto ml-2 mr-auto flex dark:text-gray-400">
+    <div
+      class="mx-1 flex cursor-pointer items-center rounded-r-full border-2 border-gray-50 bg-gray-600 p-2 text-white"
+      v-on:click="$emit('clicked', ['/'])"
+    >
+      <svg
+        id="home-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="h-8 w-8"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+        />
+      </svg>
+    </div>
+
+    <div
+      v-for="x in chain"
+      v-bind:key="x.name"
+      class="mx-2 flex cursor-pointer items-center rounded-r-full border-2 border-gray-50 bg-gray-600 p-2 text-white"
+      v-on:click="$emit('clicked', x)"
+    >
+      <svg
+        id="home-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="h-8 w-8"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          v-bind:d="worstModels[x[0]].skema.svg_path"
+        />
+      </svg>
+      <span class="mx-1">{{ x[2] }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  // if the prop is 'modelValue', we can use v-model
+  chain: {
+    type: Array<any>,
+    required: true,
+  },
+  worstModels: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineEmits(["clicked"]);
+</script>

webapp/src/layout/AppHeader.vue

@@ -2,9 +2,11 @@
   <section
     class="m-0 flex h-16 w-full flex-row items-center justify-evenly bg-gray-300 bg-opacity-90 shadow-lg dark:bg-gray-800"
   >
-    <h5
-      class="my-auto ml-2 mr-auto text-xl font-semibold tracking-wider text-gray-600 text-opacity-80 transition duration-300 ease-in-out dark:text-gray-400"
-    ></h5>
+    <FabBreadcrumb
+      v-bind:chain="modelStore.model_instance_parent_chain"
+      v-bind:worst-models="modelStore.worst_models"
+      v-on:clicked="routerLinker($event)"
+    />
     <div id="dark-theme" class="top-navigation-icon" v-on:click="toggleTheme">
       <svg
         v-if="userTheme === 'dark'"
@@ -105,9 +107,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useAuthStore } from "@/stores/authStore";
+import { useModelStore } from "@/stores/modelStore";
+import FabBreadcrumb from "@/components/FabBreadcrumb.vue";
+import { useRouter } from "vue-router";
 
 const userTheme = ref("light");
 const authStore = useAuthStore();
+const modelStore = useModelStore();
+const router = useRouter();
 
 onMounted(() => {
   const initUserTheme = getTheme() || getMediaPreference();
@@ -143,6 +150,14 @@ const getMediaPreference = () => {
     return "light";
   }
 };
+
+const routerLinker = (x: Array<any>) => {
+  if (x.length == 1) {
+    router.push(`/${x[0]}`);
+  } else {
+    router.push(`/${x[0]}/${x[1]}`);
+  }
+};
 </script>
 
 <style scoped>

webapp/src/router/index.ts

@@ -25,6 +25,10 @@ const router = createRouter({
           path: "/:model/:id",
           component: () => import("@/views/ModelDetailsView.vue"),
         },
+        {
+          path: "/:model/:id/:child_model",
+          component: () => import("@/views/ModelChildView.vue"),
+        },
       ],
     },
     {

webapp/src/stores/modelStore.ts

@@ -10,6 +10,7 @@ export const useModelStore = defineStore("model", () => {
   const model_instances = ref<Model[]>([]);
   const model_instance = ref<Model>();
   const model_instance_children = ref<any>();
+  const model_instance_parent_chain = ref<any[]>([]);
 
   const selectedOwners = ref<string[]>([]);
 
@@ -35,6 +36,13 @@ export const useModelStore = defineStore("model", () => {
     console.info(`modelStore::fetch_instance_children(${model_name}, ${id})`);
   };
 
+  const fetch_parent_chain = async (model_name: string, id: string) => {
+    model_instance_parent_chain.value = await axiosWrapper.get(
+      `/${model_name}/${id}/parent_chain`
+    );
+    console.info(`modelStore::fetch_parent_chain(${model_name}, ${id})`);
+  };
+
   const add_selected_owners = (owners: string[]) => {
     selectedOwners.value = owners;
   };
@@ -68,8 +76,10 @@ export const useModelStore = defineStore("model", () => {
     fetch_all_instances,
     fetch_instance,
     fetch_instance_children,
+    fetch_parent_chain,
     model_instances,
     model_instance,
     model_instance_children,
+    model_instance_parent_chain,
   };
 });

webapp/src/views/ModelChildView.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex h-full w-full">
+    <section id="context-bar" class="flex w-88">Context bar</section>
+
+    <section
+      id="content-container"
+      class="flex h-full w-full flex-col bg-gray-300 dark:bg-gray-700"
+    >
+      <FabTable
+        v-bind:data="modelStore.get_filtered_models()"
+        v-bind:model-fields="
+          modelStore.worst_models[model_name]['skema']['fields']
+        "
+        v-bind:model-default-fields="modelDefaultFields"
+        v-on:row-clicked="modelLink($event)"
+        v-on:delete-clicked="deleteModel($event)"
+        v-on:new-clicked="createNewModel()"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from "vue";
+
+import { useRoute, useRouter } from "vue-router";
+import { useModelStore } from "@/stores/modelStore";
+import FabTable from "@/components/FabTable.vue";
+
+import type { Model } from "@/types";
+
+const modelStore = useModelStore();
+
+const modelDefaultFields = [
+  { name: "id", in_overview: false, type: "" },
+  { name: "name", in_overview: true, type: "" },
+  { name: "owned_by", in_overview: true, type: "" },
+  { name: "tags", in_overview: true, type: "tag" },
+  { name: "updated_by", in_overview: false, type: "" },
+  {
+    name: "updated_at",
+    in_overview: false,
+    type: "date",
+  },
+  { name: "created_by", header: "Created By ", in_overview: false, type: "" },
+  {
+    name: "created_at",
+    in_overview: false,
+    type: "date",
+  },
+];
+
+// "store.worst_models[model_name]['skema']['fields']"
+const router = useRouter();
+const route = useRoute();
+
+const createNewModel = () => {
+  console.log(`new model ${model_name.value}`);
+};
+
+const deleteModel = (m: Model) => {
+  console.log(`delete model: ${model_name.value}/${m.id}`);
+};
+
+const modelLink = (m: Model) => {
+  router.push(`/${model_name.value}/${m.id}`);
+};
+
+const model_name = computed(() => {
+  return route.params.model as string;
+});
+
+onMounted(async () => {
+  console.log("modelview-mount", model_name.value);
+  await modelStore.fetch_all_instances(model_name.value);
+});
+
+watch(
+  () => route.fullPath,
+  async () => {
+    if (route.params.model && !route.params.id) {
+      console.info("modelview-watch", model_name.value);
+      await modelStore.fetch_all_instances(model_name.value);
+    }
+  }
+);
+</script>

webapp/src/views/ModelDetailsView.vue

@@ -6,6 +6,10 @@
       id="content-container"
       class="flex h-full w-full flex-col bg-gray-300 dark:bg-gray-700"
     >
+      {{ modelStore.model_instance_parent_chain }}
+      <br />
+      <br />
+
       Modelname: {{ model_name }} <br />id: {{ id }}
       <br />
       <br />
@@ -54,6 +58,7 @@ const model_name = computed(() => {
 onMounted(async () => {
   await modelStore.fetch_instance(model_name.value, id.value);
   await modelStore.fetch_instance_children(model_name.value, id.value);
+  await modelStore.fetch_parent_chain(model_name.value, id.value);
 });
 
 watch(
@@ -63,6 +68,7 @@ watch(
       console.log("watch", id.value, route.params.id);
       await modelStore.fetch_instance(model_name.value, id.value);
       await modelStore.fetch_instance_children(model_name.value, id.value);
+      await modelStore.fetch_parent_chain(model_name.value, id.value);
     }
   }
 );

webapp/src/views/ModelView.vue

@@ -73,6 +73,7 @@ const model_name = computed(() => {
 onMounted(async () => {
   console.log("modelview-mount", model_name.value);
   await modelStore.fetch_all_instances(model_name.value);
+  modelStore.model_instance_parent_chain = [];
 });
 
 watch(

webapp/vite.config.ts

@@ -16,4 +16,7 @@ export default defineConfig({
     globals: true,
     setupFiles: ["./tests/setup.js"],
   },
+  server: {
+    port: 8800,
+  },
 });

worst_crm/api_router.py

@@ -9,7 +9,7 @@
 import datetime as dt
 
 
-class APIRouter(APIRouter):
+class WorstRouter(APIRouter):
     def __init__(
         self,
         model_name: str,
@@ -46,7 +46,16 @@ async def get_all_children(
             id: UUID,
         ) -> dict | None:
             return svc.get_all_children(model_name, id)
-
+
+        @self.get(
+            "/{id}/parent_chain",
+            dependencies=[Security(dep.get_current_user)],
+        )
+        async def get_parent_chain(
+            id: UUID,
+        ) -> list | None:
+            return svc.get_parent_chain(model_name, id)
+
         @self.get(
             "/{id}/{children_model_name}",
             dependencies=[Security(dep.get_current_user)],
@@ -56,6 +65,8 @@ async def get_all_children_for_model(
             children_model_name: str,
         ) -> list | None:
             return svc.get_all_children_for_model(model_name, id, children_model_name)
+
+
 
         @self.post(
             "",

worst_crm/db.py

@@ -584,6 +584,31 @@ def get_all_children_for_model(
     )
 
 
+def get_parent_chain(
+    model_name: str,
+    id: UUID,
+) -> list | None:
+    chain = []
+
+    p = execute_stmt(
+        f"""
+        SELECT parent_type, parent_id::STRING, name
+        FROM {model_name}
+        WHERE id = %s
+        """,
+        (id,),
+    )
+
+    if p[0]:
+        chain.extend(get_parent_chain(p[0], p[1]))
+        chain.append(p)
+
+    else:
+        chain.append(p)
+
+    return chain
+
+
 def create(
     model_name: str, model_instance: Type[BaseFields]
 ) -> Type[BaseFields] | None:
@@ -681,7 +706,7 @@ def execute_stmt(
     returning_model: Type[BaseFields] = None,
     is_list: bool = False,
     returning_rs: bool = True,
-) -> Type[BaseFields] | list[Type[BaseFields]] | None:
+) -> Type[BaseFields] | list[Type[BaseFields]] | list[tuple] | None:
     with pool.connection() as conn:
         # convert a set to a psycopg list
         conn.adapters.register_dumper(set, ListDumper)