Skip to content

Commit 6c30b11

Browse files
chdavis0917chdavis0917
committed
absolved almost all errors in actions and finished typing InputHTMLMenu
1 parent d9f9a2b commit 6c30b11

File tree

4 files changed

+79
-78
lines changed

4 files changed

+79
-78
lines changed

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

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div
66
class="AttributeContainer"
77
v-for="element in componentMap[activeComponent].htmlList"
8-
:key="element.id + Date.now()"
8+
:key="element.id as number + Date.now()"
99
>
1010
<p v-if="element.id === activeHTML" class="title">
1111
Your class
@@ -31,7 +31,7 @@
3131
id="comp-btn"
3232
class="fa-solid fa-right-to-bracket"
3333
:disable="classText.length > 0 ? false : true"
34-
@click.self="submitClass(classText, activeHTML)"
34+
@click.self="submitClass(classText, activeHTML as number)"
3535
>
3636
</i>
3737
</q-input>
@@ -45,22 +45,22 @@
4545
true
4646
hide-bottom-space
4747
v-model="bindingText"
48-
@keydown.enter="addBinding(bindingText, activeHTML)"
48+
@keydown.enter="addBinding(bindingText, activeHTML as number)"
4949
>
5050
<i
5151
id="compt-btn"
5252
class="fa-solid fa-right-to-bracket"
5353
label="Add Binding"
5454
:disable="bindingText.length > 0 ? false : true"
55-
@click.self="addBinding(bindingText, activeHTML)"
55+
@click.self="addBinding(bindingText, activeHTML as number)"
5656
>
5757
</i>
5858
</q-input>
5959
</q-form>
6060
<div
6161
class="AttributeContainer"
6262
v-for="element in componentMap[activeComponent].htmlList"
63-
:key="element.id + Date.now()"
63+
:key="element.id as number + Date.now()"
6464
>
6565
<div
6666
v-if="exceptions.includes(element.text) && element.id === activeHTML"
@@ -81,7 +81,7 @@
8181
color="secondary"
8282
label="Submit Note"
8383
:disable="noteText.length > 0 ? false : true"
84-
@click.self="submitNote(noteText, activeHTML)"
84+
@click.self="submitNote(noteText, activeHTML as number)"
8585
>
8686
</i>
8787
</q-input>
@@ -98,8 +98,8 @@
9898
:label-value="'Height:' + heightText"
9999
inner-track-color="primary"
100100
color="secondary"
101-
@change="submitHeight(heightText, activeHTML)"
102-
@update:model-value="submitHeight(heightText, activeHTML)"
101+
@change="submitHeight(heightText, activeHTML as number)"
102+
@update:model-value="submitHeight(heightText, activeHTML as number)"
103103
style="float: left; margin-left: 5%"
104104
/>
105105
</q-form>
@@ -114,8 +114,8 @@
114114
:label-value="'Elevation:' + topText"
115115
inner-track-color="primary"
116116
color="secondary"
117-
@change="submitTop(topText, activeHTML)"
118-
@update:model-value="submitTop(topText, activeHTML)"
117+
@change="submitTop(topText, activeHTML as number)"
118+
@update:model-value="submitTop(topText, activeHTML as number)"
119119
style="float: left; margin-left: 35%"
120120
/>
121121
</q-form>
@@ -129,8 +129,8 @@
129129
:label-value="'Width:' + widthText"
130130
inner-track-color="primary"
131131
color="secondary"
132-
@change="submitWidth(widthText, activeHTML)"
133-
@update:model-value="submitWidth(widthText, activeHTML)"
132+
@change="submitWidth(widthText, activeHTML as number)"
133+
@update:model-value="submitWidth(widthText, activeHTML as number)"
134134
style="margin-top: 20%"
135135
/>
136136
</q-form>
@@ -144,8 +144,8 @@
144144
:label-value="'Position:' + leftText"
145145
inner-track-color="primary"
146146
color="secondary"
147-
@change="submitLeft(leftText, activeHTML)"
148-
@update:model-value="submitLeft(leftText, activeHTML)"
147+
@change="submitLeft(leftText, activeHTML as number)"
148+
@update:model-value="submitLeft(leftText, activeHTML as number)"
149149
style="margin-top: 20%"
150150
/>
151151
</q-form>
@@ -164,7 +164,7 @@
164164
class="fa-solid fa-right-to-bracket"
165165
color="secondary"
166166
label="Submit Height"
167-
@click.self="submitHeight(heightText, activeHTML)"
167+
@click.self="submitHeight(heightText, activeHTML as number)"
168168
>
169169
</i>
170170
</q-input>
@@ -184,7 +184,7 @@
184184
class="fa-solid fa-right-to-bracket"
185185
color="secondary"
186186
label="Submit Width"
187-
@click.self="submitWidth(widthText, activeHTML)"
187+
@click.self="submitWidth(widthText, activeHTML as number)"
188188
>
189189
</i>
190190
</q-input>
@@ -204,7 +204,7 @@
204204
class="fa-solid fa-right-to-bracket"
205205
color="secondary"
206206
label="Submit Height"
207-
@click.self="submitTop(topText, activeHTML)"
207+
@click.self="submitTop(topText, activeHTML as number)"
208208
>
209209
</i>
210210
</q-input>
@@ -224,7 +224,7 @@
224224
class="fa-solid fa-right-to-bracket"
225225
color="secondary"
226226
label="Submit Position"
227-
@click="submitLeft(leftText, activeHTML)"
227+
@click="submitLeft(leftText, activeHTML as number)"
228228
>
229229
</i>
230230
</q-input>
@@ -244,7 +244,7 @@
244244
color="transparent"
245245
text-color="primary"
246246
label="-"
247-
@click="(e) => handleLayer(e)"
247+
@click="(e: Event) => handleLayer(e)"
248248
/>
249249
<!-- nested for loop to iterate to display current z-index for selected htmlElement -->
250250
<template v-for="element in routes[activeRoute]">
@@ -263,21 +263,22 @@
263263
color="transparent"
264264
text-color="primary"
265265
label="+"
266-
@click="(e) => handleLayer(e)"
266+
@click="(e: Event) => handleLayer(e)"
267267
/>
268268
</q-item>
269269
</div>
270270
</div>
271271
<q-btn
272272
label="Close HTML Element"
273273
class="closeBtn"
274-
@click="closeMenu({ text: 'reset', id: 'reset' })"
274+
@click="closeMenu()"
275275
/>
276276
</div>
277277
</template>
278278

279279
<script setup lang="ts">
280280
// new script for Composition API
281+
import { Event } from "electron";
281282
import { computed, ref, watch, onMounted } from "vue";
282283
import { useStore } from "../../../store/main.js";
283284
@@ -311,13 +312,13 @@ const exceptions = ref([
311312
"e-alert",
312313
"e-dropdown",
313314
]);
314-
const attributeModal = ref("false");
315-
const classText = ref("");
316-
const heightText = ref("");
317-
const widthText = ref("");
318-
const topText = ref("");
319-
const leftText = ref("");
320-
const z = ref("0");
315+
const attributeModal = ref(false);
316+
const classText = ref();
317+
const heightText = ref();
318+
const widthText = ref();
319+
const topText = ref();
320+
const leftText = ref();
321+
// const z = ref("0");
321322
const noteText = ref("");
322323
const bindingText = ref("");
323324
// const note = ref('');
@@ -333,10 +334,10 @@ onMounted(() => {
333334
if (
334335
activeHTML.value === routes.value[activeRoute.value][i].htmlList[j].id
335336
) {
336-
heightText.value = routes.value[activeRoute.value][i].htmlList[j].h;
337-
widthText.value = routes.value[activeRoute.value][i].htmlList[j].w;
338-
topText.value = routes.value[activeRoute.value][i].htmlList[j].x;
339-
leftText.value = routes.value[activeRoute.value][i].htmlList[j].y;
337+
heightText.value = routes.value[activeRoute.value][i].htmlList[j].h as number;
338+
widthText.value = routes.value[activeRoute.value][i].htmlList[j].w as number;
339+
topText.value = routes.value[activeRoute.value][i].htmlList[j].x as number;
340+
leftText.value = routes.value[activeRoute.value][i].htmlList[j].y as number;
340341
}
341342
}
342343
}
@@ -352,9 +353,9 @@ const activeLayer = computed(() => store.activeLayer);
352353
const attributeModalOpen = computed(() => store.attributeModalOpen);
353354
const activeRoute = computed(() => store.activeRoute);
354355
const routes = computed(() => store.routes);
355-
const activeComponentData = computed(() => store.activeComponentData);
356-
const activeComponentObj = computed(() => store.activeComponentObj);
357-
const componentData = computed(() => store.componentData);
356+
// const activeComponentData = computed(() => store.activeComponentData);
357+
// const activeComponentObj = computed(() => store.activeComponentObj);
358+
// const componentData = computed(() => store.componentData);
358359
359360
//actions
360361
@@ -446,17 +447,17 @@ const submitLeft = (element: string, idNum: number) => {
446447
addActiveComponentLeft(payload);
447448
};
448449
449-
const closeMenu = (element: { text: string, id: string }) => {
450+
const closeMenu = () => {
450451
if (activeComponent.value !== "") {
451452
clearActiveHTML();
452-
openAttributeModal(element);
453+
openAttributeModal();
453454
}
454455
};
455456
456457
//function that adds/subtracts z-index on html Elements
457-
const handleLayer = (e) => {
458+
const handleLayer = (e: Event) => {
458459
e.preventDefault();
459-
let HTMLZ;
460+
let HTMLZ: number = 0;
460461
for (let i = 0; i < routes.value[activeRoute.value].length; i++) {
461462
for (
462463
let j = 0;
@@ -466,7 +467,7 @@ const handleLayer = (e) => {
466467
if (
467468
activeHTML.value === routes.value[activeRoute.value][i].htmlList[j].id
468469
) {
469-
HTMLZ = routes.value[activeRoute.value][i].htmlList[j].z;
470+
HTMLZ = routes.value[activeRoute.value][i].htmlList[j].z as number;
470471
}
471472
}
472473
}
@@ -476,10 +477,10 @@ const handleLayer = (e) => {
476477
routeArray: routes.value[activeRoute.value],
477478
z: HTMLZ,
478479
};
479-
if (e.target.innerText === "+") {
480+
if ((e.target as HTMLElement).innerText === "+") {
480481
payload.z++;
481482
}
482-
if (e.target.innerText === "-" && payload.z > 0) {
483+
if ((e.target as HTMLElement).innerText === "-" && payload.z > 0) {
483484
payload.z--;
484485
}
485486
updateHTMLLayer(payload);
@@ -489,7 +490,7 @@ const activeRouteArray = () => {
489490
return routes.value[activeRoute.value];
490491
};
491492
492-
const addBinding = (input, idNum) => {
493+
const addBinding = (input: string, idNum: number) => {
493494
if (input === "") {
494495
return;
495496
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,8 +253,8 @@ const addNestedHTML: typeof store.addNestedHTML = (payload) =>
253253
store.addNestedHTML(payload);
254254
const addNestedNoActive: typeof store.addNestedNoActive = (payload) =>
255255
store.addNestedNoActive(payload);
256-
const openAttributeModal: typeof store.openAttributeModal = (payload) =>
257-
store.openAttributeModal(payload);
256+
const openAttributeModal: typeof store.openAttributeModal = () =>
257+
store.openAttributeModal();
258258
const deleteProp: typeof store.deletePropsFromComponent = (payload) =>
259259
store.deletePropsFromComponent(payload);
260260

‎src/store/actions.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
breadthFirstSearchParent,
44
} from "src/utils/search.util";
55

6-
import { State, Actions, Component, HtmlElement } from "../../types";
6+
import { State, Actions, Component, RouteComponentMap, HtmlElement } from "../../types";
77
import { Store } from "pinia";
88
import localforage from "localforage";
99
// *** GLOBAL *** //////////////////////////////////////////////
@@ -627,7 +627,7 @@ const actions: Store<"main", State, {}, Actions> = {
627627
let indexDrag: number = 0;
628628
let indexDrop: number = 0;
629629
//find the indexes belonging to the html elements with the selectedIdDrag and selectedIdDrop
630-
htmlList.forEach((el: { id: string }, i: number) => {
630+
htmlList.forEach((el: { id: string | number }, i: number) => {
631631
if (el.id === selectedIdDrag) {
632632
indexDrag = i;
633633
} else if (el.id === selectedIdDrop) {
@@ -733,7 +733,8 @@ const actions: Store<"main", State, {}, Actions> = {
733733
},
734734

735735
addParent(payload) {
736-
this.componentMap[payload.componentName].parent[this.parentSelected] =
736+
const a = this.componentMap[payload.componentName].parent as { [key: string]: Component | RouteComponentMap }
737+
a[this.parentSelected] =
737738
this.componentMap[this.parentSelected];
738739
this.componentMap[this.parentSelected].children.push(payload.componentName);
739740
},
@@ -1046,7 +1047,7 @@ const actions: Store<"main", State, {}, Actions> = {
10461047
this.componentMap[this.activeComponent].htmlList.forEach((el) => {
10471048
//adding class into it's child 1st layer
10481049
if (el.children.length !== 0) {
1049-
el.children.forEach((element: { id: string; class: string }) => {
1050+
el.children.forEach((element: { id: string | number; class: string }) => {
10501051
if (payload.id === element.id) {
10511052
element.class = payload.class;
10521053
}
@@ -1066,7 +1067,7 @@ const actions: Store<"main", State, {}, Actions> = {
10661067
if (active.htmlList)
10671068
this.componentMap[this.activeComponent].htmlList.forEach((el) => {
10681069
if (el.children.length !== 0) {
1069-
el.children.forEach((element: { id: string; binding: string }) => {
1070+
el.children.forEach((element: { id: string | number; binding: string | number }) => {
10701071
if (payload.id === element.id) {
10711072
element.binding = payload.binding;
10721073
}

0 commit comments

Comments
 (0)