Skip to content

Commit ba22824

Browse files
katherinek123katherinek123
committed
added alerts when importing and exporting
1 parent 0ba9f1f commit ba22824

File tree

2 files changed

+104
-103
lines changed

2 files changed

+104
-103
lines changed

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

Lines changed: 68 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<template>
2-
<q-btn
3-
id="import-component-btn"
4-
size="md"
5-
color="secondary"
6-
:label=title
7-
@click="importComponent"
8-
/>
2+
<q-btn id="import-component-btn" size="md" color="secondary" :label=title @click="importComponent" />
93
</template>
104

115

@@ -28,7 +22,7 @@ export default {
2822
},
2923
methods: {
3024
//emitter to send the importedObj to CreateComponent when fully parsed.
31-
createImport(importObj){
25+
createImport(importObj) {
3226
useCreateComponent.bind(this)(importObj) //this is where we will want to invoke the composable
3327
},
3428
...mapActions([
@@ -50,49 +44,52 @@ export default {
5044
},
5145
],
5246
})
53-
.then((res) => this.openVueFile(res.filePaths))
47+
.then((res) => {
48+
this.openVueFile(res.filePaths)
49+
alert('Successfully Imported')
50+
})
5451
.catch((err) => console.log(err));
5552
},
56-
53+
5754
//parses script tag string for props
58-
parsingStringToProps (str){
55+
parsingStringToProps(str) {
5956
let props = [];
6057
let split = str.split(' ');
61-
for(let i = 0; i < split.length; i++){
62-
if(split[i].includes(':') && split[i] !== 'computed:' && split[i] !== 'methods:' && split[i] !== 'name:' && split[i] !=='components:'){
63-
let cleanStr = split[i].slice(0,split[i].indexOf(':'))
58+
for (let i = 0; i < split.length; i++) {
59+
if (split[i].includes(':') && split[i] !== 'computed:' && split[i] !== 'methods:' && split[i] !== 'name:' && split[i] !== 'components:') {
60+
let cleanStr = split[i].slice(0, split[i].indexOf(':'))
6461
props.push(cleanStr)
6562
}
6663
}
6764
return props
6865
},
6966
7067
//parses script tag string for actions
71-
parsingStringToAction (str){
68+
parsingStringToAction(str) {
7269
let action = [];
73-
if (str.indexOf('...mapActions') === -1){return action};
74-
let trashedSlice = str.slice(str.lastIndexOf('...mapActions')+15);
70+
if (str.indexOf('...mapActions') === -1) { return action };
71+
let trashedSlice = str.slice(str.lastIndexOf('...mapActions') + 15);
7572
let slice = trashedSlice.slice(0, trashedSlice.indexOf('])'));
7673
let split = slice.split(' ')
77-
for(let i = 0; i < split.length; i++){
78-
if (split[i].includes(',')){
79-
let cleanStr = split[i].slice(split[i].indexOf('"')+1,split[i].lastIndexOf('"'))
74+
for (let i = 0; i < split.length; i++) {
75+
if (split[i].includes(',')) {
76+
let cleanStr = split[i].slice(split[i].indexOf('"') + 1, split[i].lastIndexOf('"'))
8077
action.push(cleanStr)
8178
}
8279
}
8380
return action;
8481
},
8582
8683
//parses script tag string for state
87-
parsingStringToState (str){
84+
parsingStringToState(str) {
8885
let state = [];
89-
if (str.indexOf('...mapState') === -1){return state};
90-
let trashedSlice = str.slice(str.lastIndexOf('...mapState')+15);
86+
if (str.indexOf('...mapState') === -1) { return state };
87+
let trashedSlice = str.slice(str.lastIndexOf('...mapState') + 15);
9188
let slice = trashedSlice.slice(0, trashedSlice.indexOf('])'));
92-
let split = slice.split(' ')
93-
for (let i = 0; i < split.length; i++){
94-
if (split[i].includes(',')){
95-
let cleanStr = split[i].slice(split[i].indexOf('"')+1,split[i].lastIndexOf('"'))
89+
let split = slice.split(' ')
90+
for (let i = 0; i < split.length; i++) {
91+
if (split[i].includes(',')) {
92+
let cleanStr = split[i].slice(split[i].indexOf('"') + 1, split[i].lastIndexOf('"'))
9693
state.push(cleanStr)
9794
}
9895
}
@@ -105,11 +102,11 @@ export default {
105102
106103
const importObj = {}; //final output
107104
const htmlList = []; //array populated with substrings '<div>' '</div>' '<p>' etc.
108-
let compName = data[0].slice(data[0].lastIndexOf('/')+1).replace(/[^a-z0-9-_.]/gi, '').replace(/.vue/, '');
105+
let compName = data[0].slice(data[0].lastIndexOf('/') + 1).replace(/[^a-z0-9-_.]/gi, '').replace(/.vue/, '');
109106
const vueFile = fs.readFileSync(data[0], "utf8");
110107
111-
for (const key in this.$store.state.componentMap){
112-
if (this.$store.state.componentMap[key].componentName === compName){
108+
for (const key in this.$store.state.componentMap) {
109+
if (this.$store.state.componentMap[key].componentName === compName) {
113110
compName += 'duplicate'; //appends duplicate if the componentName already exists in state.
114111
}
115112
}
@@ -129,9 +126,9 @@ export default {
129126
navbar: ["<nav>", "</nav>"],
130127
};
131128
132-
133-
let htmlString = vueFile.substring(vueFile.indexOf('<template >')+10, vueFile.indexOf('</template>'));
134-
let scriptString = vueFile.substring(vueFile.indexOf(`<script>`)+8, vueFile.indexOf(`/script>`)-1)
129+
130+
let htmlString = vueFile.substring(vueFile.indexOf('<template >') + 10, vueFile.indexOf('</template>'));
131+
let scriptString = vueFile.substring(vueFile.indexOf(`<script>`) + 8, vueFile.indexOf(`/script>`) - 1)
135132
136133
htmlParser(htmlString);
137134
importObj.props = this.parsingStringToProps(scriptString);
@@ -143,7 +140,7 @@ export default {
143140
let groupings = findGroupings(htmlList);
144141
let groupingObj = objectGenerator(groupings);
145142
let groupingArray = [];
146-
for (const key in groupingObj){
143+
for (const key in groupingObj) {
147144
groupingArray.push(groupingObj[key])
148145
}
149146
importObj.htmlList = groupingArray;
@@ -156,19 +153,19 @@ export default {
156153
* @return: nothing: passes the substrings into buildList to generate an array of elements
157154
*/
158155
159-
function htmlParser(htmlString){
160-
if (!htmlString){return}
156+
function htmlParser(htmlString) {
157+
if (!htmlString) { return }
161158
//remove new lines and tabs from HTML
162159
htmlString = htmlString.replaceAll('\n', '').replaceAll('\t', '');
163160
//find index for the first < and > in the string
164161
let openTag = htmlString.indexOf('<');
165162
let closeTag = htmlString.indexOf('>');
166163
167164
//push the substring wrapped by < and > into the helper func
168-
buildList(htmlString.substring(openTag+1, closeTag))
165+
buildList(htmlString.substring(openTag + 1, closeTag))
169166
170167
//recursively call htmlParser on the remainder of the string
171-
return htmlParser(htmlString.substring(closeTag+1))
168+
return htmlParser(htmlString.substring(closeTag + 1))
172169
}
173170
174171
@@ -181,24 +178,24 @@ export default {
181178
* @return: nothing -- pushes into htmlList array which is defined outside scope of buildList
182179
*/
183180
184-
function buildList(substring){
185-
for (const elem in htmlElementMap){
186-
for (let i = 0; i < htmlElementMap[elem].length; i++){
187-
//if the htmlElementMap[elem][index] matches the substring, push it into the output array
188-
if (substring === 'p'){
189-
htmlList.push(htmlElementMap.paragraph[0])
190-
return;
191-
} else if (substring === '/p') {
192-
htmlList.push(htmlElementMap.paragraph[1])
193-
return;
194-
}
195-
if (htmlElementMap[elem][i].indexOf(substring) !== -1){
196-
htmlList.push(htmlElementMap[elem][i])
197-
return;
181+
function buildList(substring) {
182+
for (const elem in htmlElementMap) {
183+
for (let i = 0; i < htmlElementMap[elem].length; i++) {
184+
//if the htmlElementMap[elem][index] matches the substring, push it into the output array
185+
if (substring === 'p') {
186+
htmlList.push(htmlElementMap.paragraph[0])
187+
return;
188+
} else if (substring === '/p') {
189+
htmlList.push(htmlElementMap.paragraph[1])
190+
return;
191+
}
192+
if (htmlElementMap[elem][i].indexOf(substring) !== -1) {
193+
htmlList.push(htmlElementMap[elem][i])
194+
return;
195+
}
198196
}
199197
}
200198
}
201-
}
202199
203200
/**
204201
* @name: findGroupings
@@ -207,31 +204,31 @@ export default {
207204
* @return: returns an array of arrays (grouped by parent/child)
208205
*/
209206
210-
function findGroupings(array){
207+
function findGroupings(array) {
211208
let count = 0; //tracks where the parent ends
212209
let stopIndexes = []; //an array that will be used to slice out the parent/child relationships
213-
for (let i = 0; i < array.length; i++){
214-
if (array[i][1] !== '/'){
215-
if (array[i] === '<img>' || array[i] === '<a href="#"/>' || array[i] === '<input />'){
216-
if (count === 0){
210+
for (let i = 0; i < array.length; i++) {
211+
if (array[i][1] !== '/') {
212+
if (array[i] === '<img>' || array[i] === '<a href="#"/>' || array[i] === '<input />') {
213+
if (count === 0) {
217214
stopIndexes.push(i);
218215
continue;
219216
}
220217
} else {
221-
count++;
218+
count++;
222219
}
223220
} else {
224221
count--;
225222
}
226-
if (count === 0){
223+
if (count === 0) {
227224
stopIndexes.push(i)
228225
}
229226
}
230227
let groupings = [];
231228
let startIndex = 0;
232-
for (let i = 0; i < stopIndexes.length; i++){
233-
groupings.push(array.slice(startIndex, stopIndexes[i]+1));
234-
startIndex = stopIndexes[i]+1;
229+
for (let i = 0; i < stopIndexes.length; i++) {
230+
groupings.push(array.slice(startIndex, stopIndexes[i] + 1));
231+
startIndex = stopIndexes[i] + 1;
235232
}
236233
return groupings;
237234
}
@@ -244,22 +241,22 @@ export default {
244241
* @return: returns an object containing parent/children html elements nested.
245242
*/
246243
247-
function objectGenerator(array){
244+
function objectGenerator(array) {
248245
let groupingObj = {};
249-
for (let i = 0; i < array.length; i++){
250-
for (const key in htmlElementMap){
251-
if (array[i][0] === htmlElementMap[key][0]){
252-
let idGen = Date.now()-Math.floor(Math.random()*1000000);
253-
groupingObj[i] = {text: key, id: idGen}
246+
for (let i = 0; i < array.length; i++) {
247+
for (const key in htmlElementMap) {
248+
if (array[i][0] === htmlElementMap[key][0]) {
249+
let idGen = Date.now() - Math.floor(Math.random() * 1000000);
250+
groupingObj[i] = { text: key, id: idGen }
254251
}
255252
}
256253
array[i].pop();
257254
array[i].shift();
258-
if (array[i].length > 0){
255+
if (array[i].length > 0) {
259256
const childGroupings = findGroupings(array[i]);
260257
const childrenObj = objectGenerator(childGroupings);
261258
const childrenArray = [];
262-
for (const key in childrenObj){
259+
for (const key in childrenObj) {
263260
childrenArray.push(childrenObj[key])
264261
}
265262
groupingObj[i].children = childrenArray;

0 commit comments

Comments
 (0)