Skip to content

Commit

Permalink
Fixed Config, made projectsettings handling more centralized
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenjaminBruenau
BenjaminBruenau committed Feb 13, 2024
1 parent a58f493 commit 2d6815a
Show file tree
Hide file tree
Showing 10 changed files with 294 additions and 392 deletions.
56 changes: 14 additions & 42 deletions frontend/app.vue
View file

Large diffs are not rendered by default.

23 changes: 11 additions & 12 deletions frontend/components/api/ApiFilterContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ import { useUserStore } from "~/stores/user";
import { useCookie } from "#app";
const props = defineProps({
project_settings: {
type: Object,
default: () => ({data: {}})
},
currentData: {
type: Object,
default: () => ({data: {}})
},
});
const projectSettingsStore = useProjectSettingsStore()
const projectSettings = storeToRefs(projectSettingsStore)
const structure = ref({
requestOptions: {
format: {
Expand Down Expand Up @@ -117,15 +116,15 @@ const apiFilterBlocks = ref([]);
const createApiFilterBlocks = () => {
const newApiFilterBlocks = Object.keys(props.project_settings.api_endpoints).map((apiKey, index) => {
const newApiFilterBlocks = Object.keys(projectSettings.api_endpoints.value).map((apiKey, index) => {
const existingBlock = apiFilterBlocks.value.find(block => block.index === index);
const blockStructure = existingBlock ? existingBlock.structure : ref(JSON.parse(JSON.stringify(structure.value)));
console.log("SETTINGS BLOCK: ", projectSettings)
return {
index,
structure: blockStructure,
project_settings: ref(JSON.parse(JSON.stringify(props.project_settings)))
project_settings: ref(projectSettings)
};
});
Expand All @@ -134,7 +133,7 @@ const createApiFilterBlocks = () => {
}
};
watch(() => props.project_settings.api_endpoints, () => {
watch(() => projectSettings.api_endpoints, () => {
createApiFilterBlocks();
}, { deep: true });
Expand All @@ -146,7 +145,7 @@ function getApiFilterBlock(index) {
}
const { structure, project_settings } = block;
const apiEndpoints = project_settings.api_endpoints;
const apiEndpoints = projectSettings.api_endpoints.value;
const apiEndpointKeys = Object.keys(apiEndpoints);
if (apiEndpointKeys.length === 0) {
Expand Down Expand Up @@ -321,8 +320,8 @@ const sendRequest = async (queryParams,index,color) => {
});
}
function getApiColors(projectSettings) {
const apiEndpoints = projectSettings.api_endpoints;
function getApiColors() {
const apiEndpoints = projectSettings.api_endpoints.value;
const colors = [];
for (const key in apiEndpoints) {
Expand All @@ -341,7 +340,7 @@ async function runButton() {
const blockString = getApiFilterBlock(index);
if (blockString) {
console.log(JSON.stringify(blockString,null,2));
await sendRequest(blockString,index,getApiColors(props.project_settings)[index]);
await sendRequest(blockString,index,getApiColors()[index]);
}
}
}
Expand Down
128 changes: 36 additions & 92 deletions frontend/components/form/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ import {onMounted, ref} from "vue";
import {useCookie} from "nuxt/app";
const props = defineProps({
project_settings: {
type: Object,
default: () => ({data: {}})
},
premium: {
type: Boolean,
default: false
Expand All @@ -16,6 +12,8 @@ const props = defineProps({
const userStore = useUserStore()
const projectSettingsStore = useProjectSettingsStore()
const projectSettings = storeToRefs(projectSettingsStore)
const myColor = ref('black');
Expand Down Expand Up @@ -51,79 +49,47 @@ function getContrastYIQ(hexcolor){
const darkMode = ref(false)
const toggleDarkMode = (newValue: boolean) => {
projectSettings.theme.value.default_theme = darkMode.value ? 'dark' : 'light'
useColorMode().preference = darkMode.value ? 'dark' : 'light'
}
const color_primary_light = ref();
const color_primary_dark = ref();
const gradient_from_light = ref();
const gradient_to_light = ref();
const gradient_from_dark = ref();
const gradient_to_dark = ref();
function unifyHex(text){
return '#'+text.replace("#", "")
}
onMounted(() => {
console.log(JSON.stringify(props.project_settings,null,2));
color_primary_light.value = props.project_settings.theme?.primary_color_light;
color_primary_dark.value = props.project_settings.theme?.primary_color_dark;
gradient_from_light.value = props.project_settings.theme?.gradient_from_light;
gradient_to_light.value = props.project_settings.theme?.gradient_to_light;
gradient_from_dark.value = props.project_settings.theme?.gradient_from_dark;
gradient_to_dark.value = props.project_settings.theme?.gradient_to_dark;
color_primary_light.value = unifyHex(document.documentElement.style.getPropertyValue('--color-primary_light'));
color_primary_dark.value = unifyHex(document.documentElement.style.getPropertyValue('--color-primary_dark'));
gradient_from_light.value = unifyHex(document.documentElement.style.getPropertyValue('--gradient_from_light'));
gradient_to_light.value = unifyHex(document.documentElement.style.getPropertyValue('--gradient_from_light'));
gradient_from_dark.value = unifyHex(document.documentElement.style.getPropertyValue('--gradient_from_dark'));
gradient_to_dark.value = unifyHex(document.documentElement.style.getPropertyValue('--gradient_to_dark'));
console.log(JSON.stringify(projectSettings,null,2));
getShareUrl();
});
watch(color_primary_light, (newColor) => {
document.documentElement.style.setProperty('--color-primary_light', unifyHex(newColor));
const contrastColor = getContrastYIQ(unifyHex(newColor)) === 'black' ? '#FFFFFF' : '#000000';
document.documentElement.style.setProperty('--contrast-text_light', contrastColor);
});
watch(color_primary_dark, (newColor) => {
document.documentElement.style.setProperty('--color-primary_dark', unifyHex(newColor));
const contrastColor = getContrastYIQ(unifyHex(newColor)) === 'black' ? '#FFFFFF' : '#000000';
document.documentElement.style.setProperty('var(--contrast-text_dark)', contrastColor);
document.documentElement.style.setProperty('--color-primary', unifyHex(newColor));
});
watch(gradient_from_light, (newColor) => {
document.documentElement.style.setProperty('--gradient_from_light', unifyHex(newColor));
});
watch(gradient_to_light, (newColor) => {
document.documentElement.style.setProperty('--gradient_to_light', unifyHex(newColor));
});
watch(gradient_from_dark, (newColor) => {
document.documentElement.style.setProperty('--gradient_from_dark', unifyHex(newColor));
});
watch(gradient_to_dark, (newColor) => {
document.documentElement.style.setProperty('--gradient_to_dark', unifyHex(newColor));
});
watch(darkMode,(b)=>{
if(b){
document.documentElement.style.setProperty('--color-primary', unifyHex(color_primary_dark.value));
document.documentElement.style.setProperty('--color-primary', unifyHex(projectSettings.theme.value.primary_color_dark));
} else{
document.documentElement.style.setProperty('--color-primary', unifyHex(color_primary_light.value));
document.documentElement.style.setProperty('--color-primary', unifyHex(projectSettings.theme.value.primary_color_light));
}
});
watch(projectSettings.theme.value, () => {
console.log('Change')
document.documentElement.style.setProperty('--color-primary_light', unifyHex(projectSettings.theme.value.primary_color_light));
const contrastColorLight = getContrastYIQ(unifyHex(projectSettings.theme.value.primary_color_light)) === 'black' ? '#FFFFFF' : '#000000';
document.documentElement.style.setProperty('--contrast-text_light', contrastColorLight);
document.documentElement.style.setProperty('--color-primary_dark', unifyHex(projectSettings.theme.value.primary_color_dark));
const contrastColorDark = getContrastYIQ(unifyHex(projectSettings.theme.value.primary_color_dark)) === 'black' ? '#FFFFFF' : '#000000';
document.documentElement.style.setProperty('var(--contrast-text_dark)', contrastColorDark);
document.documentElement.style.setProperty('--color-primary', unifyHex(projectSettings.theme.value.primary_color_dark));
document.documentElement.style.setProperty('--gradient_from_light', unifyHex(projectSettings.theme.value.gradient_from_light));
document.documentElement.style.setProperty('--gradient_to_light', unifyHex(projectSettings.theme.value.gradient_to_light));
document.documentElement.style.setProperty('--gradient_from_dark', unifyHex(projectSettings.theme.value.gradient_from_dark));
document.documentElement.style.setProperty('--gradient_to_dark', unifyHex(projectSettings.theme.value.gradient_to_dark));
})
Expand Down Expand Up @@ -172,35 +138,13 @@ const confirmDeleteSelected = () => {
};
const emit = defineEmits(['reset-project-settings', "update-project-settings"])
function btn_projectSettings_save(){
const theme = {
theme: {
"primary_color_light": color_primary_light.value,
"primary_color_dark": color_primary_dark.value,
"gradient_from_light": gradient_from_light.value,
"gradient_to_light": gradient_to_light.value,
"gradient_from_dark": gradient_from_dark.value,
"gradient_to_dark": gradient_to_dark.value,
"default_theme": darkMode.value ? 'dark' : 'light'
}
}
const settings = {
...props.project_settings,
...theme
}
delete (settings as any)['_id']
delete (settings as any)['id']
emit('update-project-settings', settings);
const updateProjectSettings = async () => {
console.debug("Updating SETTINGS:", projectSettingsStore)
await projectSettingsStore.save()
}
function btn_projectSettings_reset(){
emit('reset-project-settings', { users: users });
const resetProjectSettings = async () => {
await projectSettingsStore.fetch()
}
const shareUrl = ref('');
Expand All @@ -226,15 +170,15 @@ async function getShareUrl() {
<template>
<div class="parent-container">
<div class="p-2 mb-2 flex justify-end">
<PrimeButton class="mr-2" label="Reset" icon="pi pi-replay" @click="btn_projectSettings_reset"/>
<PrimeButton :disabled="!userStore.roles.includes('tenant-admin')" label="Save" icon="pi pi-save" @click="btn_projectSettings_save"/>
<PrimeButton class="mr-2" label="Reset" icon="pi pi-replay" @click="resetProjectSettings"/>
<PrimeButton :disabled="!userStore.roles.includes('tenant-admin')" label="Save" icon="pi pi-save" @click="updateProjectSettings"/>
</div>

<PrimeTabView class="container">
<!--<PrimeTabPanel header="Account" :pt="{headeraction: ({ props, parent }) => ({class: panelClass(props, parent, 0)})}">
</PrimeTabPanel>-->
<PrimeTabPanel header="Endpoint Manager" :pt="{headeraction: ({ props, parent }) => ({class: panelClass(props, parent, 0)})}">
<ApiEndpointsManager :initialEndpoints="{ api_endpoints: props.project_settings['api_endpoints'] }" />
<ApiEndpointsManager :initialEndpoints="{ api_endpoints: projectSettings['api_endpoints'] }" />
</PrimeTabPanel>
<PrimeTabPanel header="★ Theming" :disabled="!props.premium" :pt="{headeraction: ({ props, parent }) => ({class: panelClass(props, parent, 1)})}">
<div style="margin:15px">
Expand All @@ -246,19 +190,19 @@ async function getShareUrl() {

<div><b>Primary Color</b></div><div></div>
<div>Light</div>
<PrimeColorPicker v-model="color_primary_light"></PrimeColorPicker>
<PrimeColorPicker v-model="projectSettings.theme.value.primary_color_light"></PrimeColorPicker>
<div>Dark</div>
<PrimeColorPicker v-model="color_primary_dark"></PrimeColorPicker>
<PrimeColorPicker v-model="projectSettings.theme.value.primary_color_dark"></PrimeColorPicker>

<div><b>Gradiant Color</b></div><div></div>
<div>From - Light</div>
<PrimeColorPicker v-model="gradient_from_light"></PrimeColorPicker>
<PrimeColorPicker v-model="projectSettings.theme.value.gradient_from_light"></PrimeColorPicker>
<div>To - Light</div>
<PrimeColorPicker v-model="gradient_to_light"></PrimeColorPicker>
<PrimeColorPicker v-model="projectSettings.theme.value.gradient_to_light"></PrimeColorPicker>
<div>From - Dark</div>
<PrimeColorPicker v-model="gradient_from_dark"></PrimeColorPicker>
<PrimeColorPicker v-model="projectSettings.theme.value.gradient_from_dark"></PrimeColorPicker>
<div>To - Dark</div>
<PrimeColorPicker v-model="gradient_to_dark"></PrimeColorPicker>
<PrimeColorPicker v-model="projectSettings.theme.value.gradient_to_dark"></PrimeColorPicker>
</div>
</div>
</PrimeTabPanel>
Expand Down
Loading

0 comments on commit 2d6815a

Please sign in to comment.