so I have 2 vue components (ToolBar and ProjectWindow) and 1 view (ProjectsView), The ToolBar is used both in ProjectWindow and in ProjectView.
In the ToolBar I have 2 buttons, one for setting the opacity of a given elemt to 0 (close) and one to set the height of the element to 50px and to move it at the bottom of the screen.
The ProjectWindow is a card that displays some information that it gets through an API call.
And On the ProjectView I have a button in the top right corner (folder).
When I press the folder Button a card is being shown with 3 elements on it (3 of my projects). This card also has the ToolBar element.
When I open the folder card and close it using the toolbar, there’s no problem, I can open it back again pressing the folder button. But if I open one of the 3 projects in the ProjectWindow card and close it, I can no longer open the folder card.
- This is ToolBar :
<script>
export default {
name: 'ToolBar',
props: {
card: Object,
projectWindow: Object,
},
data() {
return {
isMinimized: false,
}
},
methods: {
toggleSize() {
if (this.card) {
this.card.style.opacity = 10;
if (this.projectWindow) {
this.projectWindow.style.opacity = 0;
}
this.card.style.transition = "all 0.5s ease-in-out";
if (this.isMinimized) {
this.card.style.height = "500px";
} else {
this.card.style.marginTop = "auto";
this.card.style.height = "50px";
this.card.style.overflow = "hidden";
}
this.isMinimized = !this.isMinimized;
} else {
console.error("Card element not found");
}
if (this.projectWindow) {
if (this.card) {
this.card.style.opacity = 0;
}
this.projectWindow.style.transition = "all 0.5s ease-in-out";
if (this.isMinimized) {
this.card.style.height = "500px";
} else {
this.projectWindow.style.marginTop = "auto";
this.projectWindow.style.height = "50px";
this.projectWindow.style.overflow = "hidden";
}
this.isMinimized = !this.isMinimized
} else {
console.error("Project Window not found!")
}
},
close() {
if (this.card) {
this.card.style.opacity = 0;
} else {
console.error("Card element not found in close func")
this.$emit('close-project-window')
}
if (this.projectWindow) {
this.projectWindow.style.opacity = 0;
this.$emit('close-project-window');
}
}
},
}
</script>
<template>
<div class="toolbar">
<h4 v-if="isMinimized" @click="toggleSize" id="maximize" class="bi bi-fullscreen"></h4>
<h4 v-else @click="toggleSize" id="minimize" class="bi bi-fullscreen-exit"></h4>
<h4 @click="close" class="bi bi-x-square" style="color: darkred"></h4>
</div>
</template>
<style lang="scss">
.toolbar {
display: flex;
flex-direction: row;
margin-left: auto;
gap: 20px;
}
</style>
- This is the ProjectWindow:
<script>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import ToolBar from "@/components/ToolBar.vue";
export default {
name: 'ProjectWindow',
components: { ToolBar },
props: {
slug: String,
},
data() {
return{
projectWindow: null
}
},
setup(props) {
const projectData = ref({
name: null,
slug: null,
description: null,
gitHub: null,
isHosted: null,
hostLink: null,
});
onMounted(async () => {
try {
const response = await axios.get(`/api/v1/projects/`);
const project = response.data.find(p => p.slug === props.slug);
if (project) {
projectData.value = {
name: project.name,
slug: project.slug,
description: project.description.replace(/\n/g, '<br>'),
gitHub: project.github,
isHosted: project.is_hosted,
hostLink: project.host_link,
};
}
} catch (error) {
console.error(error);
}
});
return {
projectData,
};
},
mounted() {
this.projectWindow = document.getElementById('projectWindow');
}
};
</script>
<template>
<section class="container" id="projectWindow">
<div class="card">
<div class="card-header">
<h3 class="title">{{ projectData.name }}</h3>
<ToolBar :project-window="this.projectWindow"/>
</div>
<div class="card-body" id="card-body">
<div class="description" v-html="projectData.description">
</div>
</div>
<div class="card-footer" id="card-footer" style="display: flex; flex-direction: row; gap: 10px">
<a :href="projectData.gitHub" target="_blank" class="btn btn-primary">GitHub</a>
<a v-if="projectData.isHosted" :href="projectData.hostLink" target="_blank" class="btn btn-primary">Website Link</a>
</div>
</div>
</section>
</template>
- And this is the ProjectView:
<script>
import ProjectWindow from "@/components/ProjectWindow.vue";
import ToolBar from "@/components/ToolBar.vue";
export default {
name: 'Projects',
components: {ToolBar, ProjectWindow},
data() {
return {
slug: null,
isFolderOpen: false,
card: null,
projectWindow: null,
isGameOpen: false,
}
},
watch: {
isFolderOpen: function () {
this.card.style.opacity = 1;
}
},
methods: {
openGame(slug) {
this.projectWindow = document.getElementById('projectWindow');
this.card.style.opacity = 10;
if (this.projectWindow) {
this.projectWindow.style.opacity = 10;
} else {
console.error("No project window in project view")
}
this.slug = slug
this.isGameOpen = !this.isGameOpen
},
openFolder() {
this.card.style.opacity = 1;
this.isFolderOpen = !this.isFolderOpen
console.log(this.isFolderOpen)
},
closeProjectWindow() {
this.isGameOpen = false
this.card = document.getElementById('card');
console.log(this.card)
}
},
mounted() {
this.card = document.getElementById('card');
}
};
</script>
<template>
<div class="side-container">
<div v-if="isFolderOpen"><i class="bi bi-folder2-open" @click="openFolder"></i></div>
<div v-else><i class="bi bi-folder2" @click="openFolder"></i></div>
</div>
<div id="projectWindow">
<ProjectWindow :slug="this.slug" v-if="isGameOpen"/>
</div>
<section class="games container" id="card">
<div class="card" v-if="isFolderOpen">
<div class="card-header">
<h3 class="title">Games</h3>
<ToolBar :card="card" :project-window="projectWindow" @close-project-window="closeProjectWindow()"/>
</div>
<div class="card-body" id="card-body">
<div class="game">
<label for="shoot">Shoot The Crow</label>
<div id="shoot"><i class="bi bi-bullseye" style="color: red" @click="openGame('shootthecrow')"></i></div>
</div>
<div class="game">
<label for="guess">Guess The Number</label>
<div id="guess"><i class="bi bi-patch-question" style="color: green" @click="openGame('guessthenumber')">
</i></div>
</div>
<div class="game">
<label for="pig">The Pig Game</label>
<div id="pig"><i class="bi bi-dice-5-fill" style="color: mediumpurple" @click="openGame('piggame')"></i></div>
</div>
</div>
</div>
</section>
</template>
Thank you for taking the time to read this. I no longer know what to try.
I tried passing the ProjectWindow to the TooBar component as an html object but that only stopped it for working