Skip to content

Commit

Permalink
..
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiog1901
fabiog1901 committed Oct 2, 2023
1 parent 3e8a806 commit e16093a
Show file tree
Hide file tree
Showing 8 changed files with 229 additions and 79 deletions.
118 changes: 61 additions & 57 deletions webapp/src/components/FabBreadcrumb.vue
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,74 @@
<template>
<div class="ml-2 mr-auto flex dark:text-gray-400">
<div
v-if="chain.length == 0"
class="flex h-9 cursor-pointer items-center rounded-r-full border-2 border-gray-50 bg-green-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"
<router-link to="/">
<div
v-if="chain.length == 0"
class="flex h-9 cursor-pointer items-center rounded-r-full border-2 border-gray-50 bg-green-600 p-2 text-white"
>
<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-else
class="flex h-9 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"
<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-else
class="flex h-9 cursor-pointer items-center rounded-r-full border-2 border-gray-50 bg-gray-600 p-2 text-white"
v-on:click="$emit('clicked', ['/'])"
>
<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>
<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>
</router-link>

<div
v-for="x in chain"
v-bind:key="x.name"
class="ml-1 flex h-9 cursor-pointer items-center rounded-r-full border-2 border-gray-50 bg-gray-600 p-2 text-white last:bg-green-600"
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>
<router-link v-bind:to="'/' + x[0] + '/' + x[1]">
<div class="flex items-center">
<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>
</router-link>
</div>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/layout/AppHeader.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<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"
class="flex h-16 w-full flex-row items-center justify-evenly bg-gray-300 bg-opacity-90 p-2 shadow-lg dark:bg-gray-800"
>
<FabBreadcrumb
v-bind:chain="modelStore.model_instance_parent_chain"
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/router/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const router = createRouter({
component: () => import("@/views/ModelDetailsView.vue"),
},
{
path: "/:model/:id/:child_model",
path: "/:model/:id/:child_model_name",
component: () => import("@/views/ModelChildView.vue"),
},
],
Expand Down
14 changes: 14 additions & 0 deletions webapp/src/stores/modelStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,19 @@ export const useModelStore = defineStore("model", () => {
console.info(`modelStore::fetch_instance(${model_name}, ${id})`);
};

const fetch_instance_children_for_model = async (
model_name: string,
id: string,
child_model_name: string
) => {
model_instances.value = await axiosWrapper.get(
`/${model_name}/${id}/${child_model_name}`
);
console.info(
`modelStore::fetch_instance_children_for_model(${model_name}, ${id}, ${child_model_name})`
);
};

const fetch_instance_children = async (model_name: string, id: string) => {
model_instance_children.value = await axiosWrapper.get(
`/${model_name}/${id}/children`
Expand Down Expand Up @@ -76,6 +89,7 @@ export const useModelStore = defineStore("model", () => {
fetch_all_instances,
fetch_instance,
fetch_instance_children,
fetch_instance_children_for_model,
fetch_parent_chain,
model_instances,
model_instance,
Expand Down
40 changes: 36 additions & 4 deletions webapp/src/views/ModelChildView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,49 @@ const model_name = computed(() => {
return route.params.model as string;
});
const id = computed(() => {
return route.params.id as string;
});
const child_model_name = computed(() => {
return route.params.child_model_name as string;
});
onMounted(async () => {
console.log("modelview-mount", model_name.value);
await modelStore.fetch_all_instances(model_name.value);
console.log("modelchildview-mount", model_name.value, child_model_name.value);
await modelStore.fetch_instance_children_for_model(
model_name.value,
id.value,
child_model_name.value
);
modelStore.model_instance_parent_chain.push([
child_model_name.value,
"",
`${
child_model_name.value.charAt(0).toUpperCase() +
child_model_name.value.slice(1)
} List`,
]);
});
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);
console.info("modelchildview-watch", model_name.value);
await modelStore.fetch_instance_children_for_model(
model_name.value,
id.value,
child_model_name.value
);
modelStore.model_instance_parent_chain.push([
child_model_name.value,
"",
`${
child_model_name.value.charAt(0).toUpperCase() +
child_model_name.value.slice(1)
} List`,
]);
}
}
);
Expand Down
125 changes: 110 additions & 15 deletions webapp/src/views/ModelDetailsView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,79 @@
<template>
<div class="flex h-full w-full">
<section id="context-bar" class="flex w-88">Context bar</section>
<section id="context-bar" class="flex w-96 flex-col">
<div v-for="(v, k) in modelStore.model_instance_children" v-bind:key="k">
<router-link v-bind:to="route.path + '/' + k"
><span
class="m-1 flex w-32 cursor-pointer justify-center rounded border-b bg-red-500 p-2 align-middle text-white hover:font-bold"
>{{ k }}</span
>
</router-link>
<div
v-for="n in v"
v-bind:key="n"
class="m-2 mx-4 flex cursor-pointer justify-center rounded-full border-b bg-blue-500 p-2 align-middle text-white hover:font-bold"
>
<router-link v-bind:to="'/' + k + '/' + n.id">
<span class="">{{ n.name }}</span>
</router-link>
</div>
</div>
</section>

<section
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 />
{{ modelStore.model_instance }}
<br />
<br />
{{ modelStore.model_instance_children }}
<div v-for="(v, k) in modelStore.model_instance" v-bind:key="k">
<div class="m-2 text-lg font-semibold dark:text-slate-200">
{{ titleCase(k) }}
</div>

<!-- <template v-if="modelStore.worst_models[model_name].skema.fields[].type === 'tag'">
<div
v-for="tag in slotProps.data[col.name]"
v-bind:key="tag"
class="p-1"
>
<div
class="flex h-8 w-16 items-center justify-center text-sm font-semibold"
v-bind:class="getStatusLabel(tag)"
>
{{ tag }}
</div>
</div>
</template> -->

<span
v-show="!editing"
class="m-2 h-12 w-44 bg-slate-500 p-2 dark:text-slate-100"
v-on:dblclick="editing = !editing"
>
<label for="value">{{ v }}</label>
</span>
<!-- <span v-show="editing" class="bg-gray-100">
<input
focus="true"
class="h-12"
v-bind:value="value"
type="text"
v-on:input="value = $event.target.value"
v-on:focusout="editing = !editing"
/>
</span> -->
<br />
<br />
<!-- {{k}}
{{
modelStore.worst_models[model_name].skema.fields
}} -->
</div>
</section>
</div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from "vue";
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useModelStore } from "@/stores/modelStore";
Expand Down Expand Up @@ -55,6 +106,50 @@ const model_name = computed(() => {
return route.params.model as string;
});
const editing = ref<boolean>(false);
const titleCase = (s: string) =>
s
.replace(/^[-_]*(.)/, (_, c) => c.toUpperCase()) // Initial char (after -/_)
.replace(/[-_]+(.)/g, (_, c) => "_" + c.toUpperCase()); // First char after each -/_
const hashCode = (str: string) => {
var hash = 0,
i,
chr;
if (str.length === 0) return hash;
for (i = 0; i < str.length; i++) {
chr = str.charCodeAt(i);
hash = (hash << 5) - hash + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};
const getLabel = (str: string) => {
const crc = hashCode(str);
switch (crc % 9) {
case 0:
return "bg-indigo-400 rounded-2xl p-2";
case 1:
return "bg-purple-600 rounded-2xl p-2";
case 2:
return "bg-teal-400 rounded-2xl p-2";
case 3:
return "bg-orange-400 rounded-2xl p-2";
case 4:
return "bg-rose-500 rounded-2xl p-2";
case 5:
return "bg-amber-400 rounded-2xl p-2";
case 6:
return "bg-lime-600 rounded-2xl p-2";
case 7:
return "bg-emerald-600 rounded-2xl p-2";
case 8:
return "bg-fuchsia-400 rounded-2xl p-2";
}
};
onMounted(async () => {
await modelStore.fetch_instance(model_name.value, id.value);
await modelStore.fetch_instance_children(model_name.value, id.value);
Expand All @@ -64,8 +159,8 @@ onMounted(async () => {
watch(
() => route.fullPath,
async () => {
if (id.value) {
console.log("watch", id.value, route.params.id);
if (id.value && !route.params.child_model_name) {
console.log("modeldetailsview-watch", id.value, route.params);
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);
Expand Down
5 changes: 5 additions & 0 deletions webapp/src/views/ModelView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ const modelDefaultFields = [
in_overview: false,
type: "date",
},
{
name: "attachments",
in_overview: false,
type: "list",
},
];
// "store.worst_models[model_name]['skema']['fields']"
Expand Down
Loading

0 comments on commit e16093a

Please sign in to comment.