From f28c770a1635a67730c4e469e6c8cc16208c3807 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laureline=20Val=C3=A9rie=20David?= <ltouroumov@gmail.com>
Date: Tue, 2 Jul 2024 14:20:29 +0200
Subject: [PATCH] Skeleton for dynamic styles

---
 components/utils/DynamicStyles.vue   |  7 ++++++
 components/viewer/StyleObj.vue       | 25 +++++++++++++++++++
 components/viewer/StyleProject.vue   | 16 +++++++++++++
 components/viewer/StyleRow.vue       | 23 ++++++++++++++++++
 components/viewer/ViewProjectRow.vue |  8 ++++++-
 composables/project.ts               | 36 ++++++++++++++++++++++++++++
 pages/index.vue                      |  5 ++--
 7 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 components/utils/DynamicStyles.vue
 create mode 100644 components/viewer/StyleObj.vue
 create mode 100644 components/viewer/StyleProject.vue
 create mode 100644 components/viewer/StyleRow.vue

diff --git a/components/utils/DynamicStyles.vue b/components/utils/DynamicStyles.vue
new file mode 100644
index 0000000..7a1f5f4
--- /dev/null
+++ b/components/utils/DynamicStyles.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { stylesheet } = defineProps<{ stylesheet: string }>();
+</script>
+
+<template>
+  <component :is="'style'" v-html="stylesheet" />
+</template>
diff --git a/components/viewer/StyleObj.vue b/components/viewer/StyleObj.vue
new file mode 100644
index 0000000..20e8c2c
--- /dev/null
+++ b/components/viewer/StyleObj.vue
@@ -0,0 +1,25 @@
+<template>
+  <DynamicStyles :stylesheet="stylesheet" />
+</template>
+
+<script setup lang="ts">
+import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import { RowStyles } from '~/composables/project';
+
+const { styles, objId } = defineProps<{ styles: RowStyles; objId: string }>();
+
+const stylesheet = computed(() => {
+  const parts = [];
+
+  // TODO: Wire the right props here
+  if (styles.rowBgColorIsOn) {
+    parts.push(`&.project-obj { background-color: ${styles.rowBgColor}; }`);
+  }
+
+  if (parts.length > 0) {
+    return `#obj-${objId} { ${parts.join('\n')} }`;
+  } else {
+    return '';
+  }
+});
+</script>
diff --git a/components/viewer/StyleProject.vue b/components/viewer/StyleProject.vue
new file mode 100644
index 0000000..ee825c3
--- /dev/null
+++ b/components/viewer/StyleProject.vue
@@ -0,0 +1,16 @@
+<template>
+  <DynamicStyles :stylesheet="stylesheet" />
+</template>
+
+<script setup lang="ts">
+import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import { ProjectStyles } from '~/composables/project';
+
+const { styles } = defineProps<{ styles: ProjectStyles }>();
+
+const stylesheet = computed(() => {
+  const parts = [];
+  parts.push(`.project { background-color: ${styles.backgroundColor}; }`);
+  return parts.join('\n');
+});
+</script>
diff --git a/components/viewer/StyleRow.vue b/components/viewer/StyleRow.vue
new file mode 100644
index 0000000..78844bf
--- /dev/null
+++ b/components/viewer/StyleRow.vue
@@ -0,0 +1,23 @@
+<template>
+  <DynamicStyles :stylesheet="stylesheet" />
+</template>
+
+<script setup lang="ts">
+import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import { RowStyles } from '~/composables/project';
+
+const { styles, rowId } = defineProps<{ styles: RowStyles; rowId: string }>();
+
+const stylesheet = computed(() => {
+  const parts = [];
+  if (styles.rowBgColorIsOn) {
+    parts.push(`.project-row { background-color: ${styles.rowBgColor}; }`);
+  }
+
+  if (parts.length > 0) {
+    return `#row-${rowId} { ${parts.join('\n')} }`;
+  } else {
+    return '';
+  }
+});
+</script>
diff --git a/components/viewer/ViewProjectRow.vue b/components/viewer/ViewProjectRow.vue
index b301946..0404b1f 100644
--- a/components/viewer/ViewProjectRow.vue
+++ b/components/viewer/ViewProjectRow.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="project-row-wrapper">
+  <div :id="`row-${row.id}`" class="project-row-wrapper">
+    <StyleRow
+      v-if="row.isPrivateStyling"
+      :styles="row.styling"
+      :row-id="row.id"
+    />
     <div :class="{ 'project-row': true, hidden: !isVisible }">
       <div class="row-meta">
         <div class="row-title">{{ row.title }}</div>
@@ -28,6 +33,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import StyleRow from '~/components/viewer/StyleRow.vue';
 import { buildConditions } from '~/composables/conditions';
 import { ProjectRow } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';
diff --git a/composables/project.ts b/composables/project.ts
index d6a0d00..cf92c62 100644
--- a/composables/project.ts
+++ b/composables/project.ts
@@ -1,3 +1,32 @@
+export type AddonStyles = {
+  addonTitle: string;
+  addonText: string;
+};
+
+export type ObjStyles = {
+  objectTitle: string;
+  objectText: string;
+};
+
+export type RowStyles = ObjStyles &
+  AddonStyles & {
+    rowTitle: string;
+    rowText: string;
+    rowTitleColor: string;
+    rowTextColor: string;
+    rowBgColor: string;
+    rowBgColorIsOn: boolean;
+  };
+
+export type BarStyles = {
+  barTextFont: string;
+};
+
+export type ProjectStyles = RowStyles &
+  BarStyles & {
+    backgroundColor: string;
+  };
+
 export type ConditionTerm = {
   reqId: string;
   reqId1: string;
@@ -50,6 +79,9 @@ export type ProjectObj = HasId &
     isNotSelectable: boolean;
     numMultipleTimesMinus: string;
     numMultipleTimesPluss: string;
+
+    isPrivateStyling: boolean;
+    styling: ObjStyles;
   };
 
 export type ProjectRow = HasId &
@@ -66,6 +98,9 @@ export type ProjectRow = HasId &
     isInfoRow: boolean;
 
     objects: ProjectObj[];
+
+    isPrivateStyling: boolean;
+    styling: RowStyles;
   };
 
 export type PointType = {
@@ -81,6 +116,7 @@ export type Project = {
   rows: ProjectRow[];
   backpack: ProjectRow[];
   pointTypes: PointType[];
+  styling: ProjectStyles;
 };
 
 export type ProjectFile = {
diff --git a/pages/index.vue b/pages/index.vue
index 9de5b56..98103c9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,6 +10,7 @@
         />
       </div>
     </div>
+    <StyleProject :styles="project.data.styling" />
     <ViewBackpack />
     <ViewSearch />
   </div>
@@ -47,6 +48,7 @@
 import { ref } from '#imports';
 import ViewBackpack from '~/components/viewer/modal/ViewBackpack.vue';
 import ViewSearch from '~/components/viewer/modal/ViewSearch.vue';
+import StyleProject from '~/components/viewer/StyleProject.vue';
 import ViewMenuBar from '~/components/viewer/ViewMenuBar.vue';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 
@@ -69,9 +71,6 @@ const loadRemoteFile = async ({ target }: MouseEvent) => {
 
 <style lang="scss">
 .project {
-  background: black;
-  color: white;
-
   font-family: sans-serif;
   padding: 0 1em;
 }