Skip to content

Commit c647f75

Browse files
chdavis0917chdavis0917
authored
Merge pull request #2 from oslabs-beta/composition
Composition
2 parents d0afb71 + ad30650 commit c647f75

40 files changed

+7849
-2519
lines changed

‎src/App.vue

Lines changed: 283 additions & 135 deletions
Large diffs are not rendered by default.

‎src/components/Canvas.vue

Lines changed: 393 additions & 13 deletions
Large diffs are not rendered by default.

‎src/components/EssentialLink.vue

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,42 @@
2222
</template>
2323

2424
<script>
25+
export default defineComponent({
26+
name: 'EssentialLink',
27+
props: props,
28+
})
29+
</script>
30+
31+
<script setup>
32+
import { defineComponent, defineProps } from 'vue'
33+
34+
const props = defineProps({
35+
title: {
36+
type: String,
37+
required: true
38+
},
39+
40+
caption: {
41+
type: String,
42+
default: ''
43+
},
44+
45+
link: {
46+
type: String,
47+
default: '#'
48+
},
49+
50+
icon: {
51+
type: String,
52+
default: ''
53+
}
54+
})
55+
56+
</script>
57+
58+
59+
<!-- old options api script -->
60+
<!-- <script>
2561
import { defineComponent } from 'vue'
2662
2763
export default defineComponent({
@@ -48,4 +84,4 @@ export default defineComponent({
4884
}
4985
}
5086
})
51-
</script>
87+
</script> -->

‎src/components/composables/useCreateComponent.js

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
// import * as ElementPlus from '../../../node_modules/element-plus/es/components' // importing all components from Element Plus with install wrappers
22

3-
export function useCreateComponent(importObj) {
3+
export function useCreateComponent(importObj, propObj) {
4+
// this function requires userActions, userState, userProps, componentNameInputValue, createAction, createState, createProp, selectedElementList, componentMap, registerComponent, setActiveComponent
45
const createComponent = (importObj) => {
56
let imported = false; //alter this logic once ready to import components
67
if (importObj.hasOwnProperty('componentName')) {
78
imported = true;
89
//Check if state and actions on import exist in the store. If not, add them.
910
for (let i = 0; i < importObj.actions.length; i++) {
10-
if (!this.userActions.includes(importObj.actions[i])) {
11-
this.createAction(importObj.actions[i])
11+
if (!propObj.userActions.includes(importObj.actions[i])) {
12+
propObj.createAction(importObj.actions[i])
1213
}
1314
}
1415
for (let i = 0; i < importObj.state.length; i++) {
15-
if (!this.userState.includes(importObj.state[i])) {
16-
this.createState(importObj.state[i])
16+
if (!propObj.userState.includes(importObj.state[i])) {
17+
propObj.createState(importObj.state[i])
1718
}
1819
}
1920
for (let i = 0; i < importObj.props.length; i++) {
20-
if (!this.userProps.includes(importObj.props[i])) {
21-
this.createProp(importObj.props[i])
21+
if (!propObj.userProps.includes(importObj.props[i])) {
22+
propObj.createProp(importObj.props[i])
2223
}
2324
}
2425
}
2526

26-
if (imported === false && !this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "")) {
27+
if (imported === false && !propObj.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "")) {
2728
event.preventDefault();
2829
return false;
2930
}
@@ -32,7 +33,7 @@ export function useCreateComponent(importObj) {
3233
x: importObj?.parent?.x ?? 0,
3334
y: importObj?.parent?.y ?? 0,
3435
z: importObj?.parent?.z ?? 0,
35-
htmlList: this.selectedElementList,
36+
htmlList: propObj.selectedElementList,
3637
noteList: [],
3738
children: [],
3839
actions: [],
@@ -57,11 +58,11 @@ export function useCreateComponent(importObj) {
5758
component.state = importObj.state;
5859
component.props = importObj.props;
5960
} else {
60-
component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "");
61+
component.componentName = propObj.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "");
6162
}
62-
if (!this.componentMap[component.componentName]) {
63-
this.registerComponent(component);
64-
this.setActiveComponent(component.componentName);
63+
if (!propObj.componentMap[component.componentName]) {
64+
propObj.registerComponent(component);
65+
propObj.setActiveComponent(component.componentName);
6566
}
6667
}
6768
createComponent(importObj)

‎src/components/left-sidebar/ComponentTab/ActionsSubMenu.vue

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
:max-height="180"
1919
:option-height="20"
2020
open-direction="top"
21-
:options="actionOptions"
21+
:options="userActions"
2222
:searchable="false"
2323
@search-change="stopDelete($event)"
2424
>
@@ -60,6 +60,57 @@
6060
</template>
6161

6262
<script>
63+
export default {
64+
name: "ActionsSubMenu",
65+
};
66+
</script>
67+
68+
<script setup>
69+
// new script for Composition API
70+
71+
import { computed } from "vue";
72+
import { useStore } from "vuex";
73+
import VueMultiselect from "vue-multiselect";
74+
75+
const store = useStore();
76+
77+
const selectedActions = computed(() => store.state.selectedActions);
78+
const userActions = computed(() => store.state.userActions);
79+
const componentMap = computed(() => store.state.componentMap);
80+
const activeComponent = computed(() => store.state.activeComponent);
81+
82+
//getters
83+
84+
const actionOptions = userActions;
85+
// actionOptions() {
86+
// return this.userActions;
87+
// },
88+
89+
90+
91+
const selectAction = computed({
92+
get() {
93+
return [...selectedActions.value];
94+
},
95+
set(value) {
96+
addActionSelected(value);
97+
}
98+
});
99+
100+
// Methods
101+
102+
const addActionSelected = (payload) => store.dispatch("addActionSelected", payload)
103+
const addActionToComponent = (payload) => store.dispatch("addActionToComponent", payload)
104+
const deleteActionFromComponent = (payload) => store.dispatch("deleteActionFromComponent", payload)
105+
106+
const stopDelete = (e) => {if (e.code === "Backspace") e.stopPropogation()};
107+
const addActionToComp = () => {addActionToComponent([...selectedActions.value])};
108+
const deleteAction = (action) => {deleteActionFromComponent(action)};
109+
110+
</script>
111+
112+
113+
<!-- <script>
63114
import { mapState, mapActions } from "vuex";
64115
import VueMultiselect from "vue-multiselect";
65116
@@ -75,9 +126,11 @@ export default {
75126
},
76127
selectAction: {
77128
get() {
129+
console.log("Inside get!", this.selectedActions);
78130
return this.selectedActions;
79131
},
80132
set(value) {
133+
console.log("What is value?", value)
81134
this.addActionSelected(value);
82135
},
83136
},
@@ -102,7 +155,7 @@ export default {
102155
},
103156
},
104157
};
105-
</script>
158+
</script> -->
106159

107160
<style lang="scss" scoped>
108161
.selection-container {

‎src/components/left-sidebar/ComponentTab/AttributesSubMenu.vue

Lines changed: 138 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,157 @@
11
<template>
22
<div>
3-
4-
<q-btn-dropdown class="attributeDropDown" color="primary" :label="attributeSelection">
3+
<q-btn-dropdown
4+
class="attributeDropDown"
5+
color="primary"
6+
:label="attributeSelection"
7+
>
58
<q-list>
6-
<q-item clickable v-close-popup @keyup.enter="changeAttribute('id')" @click="changeAttribute('id')">
9+
<q-item
10+
clickable
11+
v-close-popup
12+
@keyup.enter="changeAttribute('id')"
13+
@click="changeAttribute('id')"
14+
>
715
<q-item-section>
816
<q-item-label>ID</q-item-label>
917
</q-item-section>
1018
</q-item>
1119

12-
<q-item clickable v-close-popup @keyup.enter="changeAttribute('class')" @click="changeAttribute('class')">
20+
<q-item
21+
clickable
22+
v-close-popup
23+
@keyup.enter="changeAttribute('class')"
24+
@click="changeAttribute('class')"
25+
>
1326
<q-item-section>
1427
<q-item-label>Class</q-item-label>
1528
</q-item-section>
1629
</q-item>
1730
</q-list>
1831
</q-btn-dropdown>
19-
<!--Attribute (id/class so far) change function for main component parent-->
20-
<q-input @keyup.enter="createAttribute(attributeText)" color="white" dark outlined bottom-slots
21-
v-model="attributeText" label="Enter Label" dense class="input-add" v-on:keyup.delete.stop>
32+
<!--Attribute (id/class so far) change function for main component parent-->
33+
<q-input
34+
@keyup.enter="createAttribute(attributeText)"
35+
color="white"
36+
dark
37+
outlined
38+
bottom-slots
39+
v-model="attributeText"
40+
label="Enter Label"
41+
dense
42+
class="input-add"
43+
v-on:keyup.delete.stop
44+
>
2245
<template v-slot:append>
2346
<q-btn flat icon="add" @click="createAttribute(attributeText)" />
2447
</template>
2548
</q-input>
26-
<!--delete buttons to remove class/id-->
27-
<button v-if="this.activeComponentObj.htmlAttributes.class !== ''" class="deleteButton"
28-
@click="deleteAttribute('class')" color="primary">Remove class</button>
49+
<!--delete buttons to remove class/id-->
50+
<button
51+
v-if="this.activeComponentObj.htmlAttributes.class !== ''"
52+
class="deleteButton"
53+
@click="deleteAttribute('class')"
54+
color="primary"
55+
>
56+
Remove class
57+
</button>
2958

30-
<button v-if="this.activeComponentObj.htmlAttributes.id !== ''" class="deleteButton" @click="deleteAttribute('id')"
31-
color="primary">Remove id</button>
59+
<button
60+
v-if="this.activeComponentObj.htmlAttributes.id !== ''"
61+
class="deleteButton"
62+
@click="deleteAttribute('id')"
63+
color="primary"
64+
>
65+
Remove id
66+
</button>
3267
</div>
3368
</template>
3469

3570
<script>
71+
export default {
72+
name: "AttributesSubMenu",
73+
};
74+
</script>
75+
76+
<script setup>
77+
// new script for Composition API
78+
import { computed, ref } from "vue";
79+
import { useStore } from "vuex";
80+
import VueMultiselect from "vue-multiselect";
81+
82+
const store = useStore();
83+
84+
//data
85+
86+
let attributeText = ref("");
87+
let attributeSelection = ref("id");
88+
let deleteText = ref("");
89+
90+
//computed
91+
92+
const selectedProps = computed(() => store.state.selectedProps);
93+
const userProps = computed(() => store.state.userProps);
94+
const activeComponentObj = computed(() => store.state.activeComponentObj);
95+
let activeComponent = computed(() => store.state.activeComponent);
96+
const routes = computed(() => store.state.routes);
97+
const activeRoute = computed(() => store.state.activeRoute);
98+
const activeRouteKey = computed(
99+
() => store.state.routes[store.state.activeRoute]
100+
);
101+
102+
//actions
103+
104+
const editAttribute = (payload) => store.dispatch("editAttribute", payload);
105+
106+
const activeComponentData = () => {
107+
return cloneDeep(activeComponentObj.value);
108+
};
109+
110+
//methods
111+
112+
// Prevent Delete on changes to searchable multiselect
113+
const stopDelete = (e) => {
114+
if (e.code === "Backspace") e.stopPropogation();
115+
};
116+
117+
//function to change the state of the attribute selection dropdown menu
118+
const changeAttribute = (attribute) => {
119+
attributeSelection.value = attribute;
120+
};
121+
122+
//attribute change function to create attribute
123+
const createAttribute = (attribute) => {
124+
// console.log("What is my attributeSelection?", typeof attributeSelection, attributeSelection)
125+
// console.log("What is my attributeText?", typeof attributeText, attributeText)
126+
// console.log("What is my activeComponent.value?", typeof activeComponent.value, activeComponent.value)
127+
// console.log("What is my activeRouteKey.value?", typeof activeRouteKey.value, activeRouteKey.value)
128+
// console.log("What is my activeComponent?", typeof activeComponentData, activeComponentData)
129+
130+
editAttribute({
131+
attribute: attributeSelection.value,
132+
value: attribute,
133+
activeComponent: activeComponent.value,
134+
routeArray: activeRouteKey.value,
135+
activeComponentData: activeComponentData,
136+
});
137+
attributeText.value = "";
138+
};
139+
140+
//delete attribute after the delete bvutton has been clicked
141+
const deleteAttribute = (attribute) => {
142+
editAttribute({
143+
attribute: attribute,
144+
value: "",
145+
activeComponent: activeComponent.value,
146+
routeArray: activeRouteKey.value,
147+
activeComponentData: activeComponentData,
148+
});
149+
};
150+
</script>
151+
152+
<!--
153+
<script>
154+
//old Options API code
36155
import { mapState, mapActions } from "vuex";
37156
import VueMultiselect from "vue-multiselect";
38157
@@ -70,6 +189,11 @@ export default {
70189
},
71190
//attribute change function to create attribute
72191
createAttribute(attributeText) {
192+
// console.log("what is attributeSelection?", typeof this.attributeSelection, this.attributeSelection)
193+
// console.log("what is attributeText?", typeof attributeText, attributeText)
194+
// console.log("what is activeComponent?", typeof this.activeComponent, this.activeComponent)
195+
// console.log("what is this.routes[this.activeRoute]?", typeof this.routes[this.activeRoute], this.routes[this.activeRoute])
196+
// console.log("what is this.activeComponentData?", typeof this.activeComponentData, this.activeComponentData)
73197
this.editAttribute({
74198
attribute: this.attributeSelection,
75199
value: attributeText,
@@ -96,7 +220,7 @@ export default {
96220
}
97221
},
98222
};
99-
</script>
223+
</script> -->
100224

101225
<style lang="scss" scoped>
102226
.attributeDropDown {
@@ -121,4 +245,4 @@ export default {
121245
.deleteButton:hover {
122246
cursor: pointer;
123247
}
124-
</style>
248+
</style>

0 commit comments

Comments
 (0)