From 0ff501d4aa28b64a11a3d9a6101e3f997a9e9795 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 18:29:08 +0100
Subject: [PATCH] teleport per spostare il dialog in una posizione consona nel DOM
---
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue | 87 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 87 insertions(+), 0 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue
new file mode 100644
index 0000000..8afc81b
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue
@@ -0,0 +1,87 @@
+<template>
+ <base-card>
+ <base-button
+ @click="setSelectedTab('stored-resources')"
+ :mode="storedResButtonMode"
+ >Stored Resource</base-button
+ >
+ <base-button
+ @click="setSelectedTab('add-resource')"
+ :mode="addResButtonMode"
+ >Add Resource</base-button
+ >
+ </base-card>
+ <KeepAlive>
+ <component :is="selectedTab"></component>
+ </KeepAlive>
+</template>
+
+<script>
+import StoredResources from './StoredResource.vue';
+import AddResource from './AddResource.vue';
+
+export default {
+ components: {
+ StoredResources: StoredResources,
+ AddResource: AddResource,
+ },
+ data() {
+ return {
+ selectedTab: 'stored-resources',
+ storedResouces: [
+ {
+ id: 'official-guide',
+ title: 'Official Guide',
+ description: 'The official Vue.js documentation',
+ link: 'https://vuejs.org',
+ },
+ {
+ id: 'google',
+ title: 'Google',
+ description: 'Learn to google...',
+ link: 'https://google.com',
+ },
+ ],
+ };
+ },
+ computed: {
+ storedResButtonMode() {
+ return this.selectedTab === 'stored-resources' ? null : 'flat';
+ },
+ addResButtonMode() {
+ return this.selectedTab === 'add-resource' ? null : 'flat';
+ },
+ },
+ provide() {
+ return {
+ resources: this.storedResouces,
+ addResource: this.addResource,
+ deleteResource: this.removeResource,
+ };
+ },
+ methods: {
+ setSelectedTab(tab) {
+ this.selectedTab = tab;
+ },
+ addResource(title, description, url) {
+ const newResource = {
+ id: new Date().toISOString(),
+ title: title,
+ description: description,
+ link: url,
+ };
+
+ this.storedResouces.unshift(newResource);
+ this.selectedTab = 'stored-resources';
+ },
+ removeResource(resId) {
+ const resIndex = this.storedResouces.findIndex(
+ (res) => res.id === resId
+ );
+ this.storedResouces.splice(resIndex, 1);
+ },
+ },
+};
+</script>
+
+<style scoped></style>
--
Gitblit v1.8.0