Skip to content

Commit a414c9c

Browse files
shanonlee541shanonlee541
authored
Merge pull request #128 from open-source-labs/shanonUploadImage
Shanon upload image
2 parents 94390bf + c9c26c3 commit a414c9c

File tree

7 files changed

+852
-675
lines changed

7 files changed

+852
-675
lines changed

‎package-lock.json

Lines changed: 649 additions & 659 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-electron/electron-main.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,19 @@ ipcMain.handle("openProject", async (event, arg) => {
5757
return result;
5858
});
5959

60+
// Handle dialogs for uploading a mockup image
61+
ipcMain.handle("uploadImage", async (event, arg) => {
62+
const result = await dialog.showOpenDialog(arg);
63+
return result;
64+
})
65+
66+
// Handle dialogs for clearing a mockup image
67+
ipcMain.handle("clearImage", async (event, arg) => {
68+
const result = await dialog.showMessageBox(arg);
69+
return result;
70+
})
71+
72+
6073
// ************** Slack OAuth functions **********************
6174
// Sends request to Slack for User's information,
6275
// then sends user information back to renderer process

‎src/components/ComponentDisplay.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export default {
208208
? {
209209
background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
210210
}
211-
: {};
211+
: { };
212212
},
213213
},
214214
updated() {

‎src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
33
<template>
44
<q-card id="store-cards">
5-
<!-- <UploadImage v-if="activeComponent === ''"/> -->
5+
<UploadImage v-if="activeComponent === ''"/>
66
<CreateComponent v-if="activeComponent === ''"/>
77
<EditDeleteComponents v-if="activeComponent !== ''"/>
88
</q-card>
@@ -12,7 +12,7 @@ Functionality includes: if active component is selected, will switch view to edi
1212
import CreateComponent from './CreateComponent.vue'
1313
import EditDeleteComponents from './EditDeleteComponents.vue'
1414
import { mapState } from 'vuex'
15-
// import UploadImage from '../UploadImage.vue'
15+
import UploadImage from '../UploadImage.vue'
1616
export default {
1717
data () {
1818
return {
@@ -27,7 +27,7 @@ export default {
2727
components: {
2828
CreateComponent,
2929
EditDeleteComponents,
30-
// UploadImage,
30+
UploadImage,
3131
}
3232
}
3333
</script>

‎src/components/home_sidebar_items/UploadImage.vue

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!--
2+
Description:
3+
Displays Mockup Image upload dropdown as well as minified mockup image once selected
4+
Functionality includes: importing and clearing mockup image
5+
-->
6+
7+
<template>
8+
<div class="home-sidebar drawer-menu">
9+
<q-list>
10+
<q-expansion-item expand-separator label="Upload Mockup Image">
11+
<div class="upload">
12+
<q-btn class="upload-btn" color="secondary" label="Upload Mockup" @click="importMockup" />
13+
<q-btn
14+
v-if="source !== ''"
15+
class="upload-btn"
16+
color="secondary"
17+
label="Clear Image"
18+
@click="removeImage"
19+
/>
20+
<q-btn v-else disable class="upload-btn" color="secondary" label="Clear Image" />
21+
</div>
22+
<div class="file-path">
23+
<q-card>
24+
<img class='img' v-if='this.imagePath[this.activeRoute] !== ""' :src="'file:///' + this.imagePath[this.activeRoute]"/>
25+
</q-card>
26+
</div>
27+
</q-expansion-item>
28+
</q-list>
29+
</div>
30+
</template>
31+
32+
<script>
33+
import { mapState, mapActions } from 'vuex'
34+
import uploadImage from '../../utils/uploadImage.util'
35+
import clearImageDialog from '../../utils/clearImage.util'
36+
37+
export default {
38+
name: 'upload-image',
39+
data () {
40+
return {
41+
files: [],
42+
source: ''
43+
}
44+
},
45+
computed: {
46+
...mapState(['imagePath', 'activeRoute'])
47+
},
48+
methods: {
49+
...mapActions(['importImage', 'clearImage']),
50+
// imports mockup image
51+
// ** Importing mockup image ONLY works in build mode due to path differences
52+
// In dev mode, error thrown is: "Not allowed to load local resource: PATH "
53+
importMockup () {
54+
// A promise gets returned out from uploadImage, imported from uploadImage utils
55+
const helperPromise = uploadImage()
56+
helperPromise
57+
// res contains the selected file path (string)
58+
.then(res => {
59+
if (this.activeRoute !== '') {
60+
this.importImage({ img: res, route: this.activeRoute })
61+
if (this.imagePath[this.activeRoute]) {
62+
this.source = 'file:///' + this.imagePath[this.activeRoute]
63+
}
64+
}
65+
})
66+
.catch(err => console.log(err))
67+
},
68+
// removes mockup image
69+
removeImage () {
70+
const responsePromise = clearImageDialog()
71+
72+
responsePromise
73+
.then(res => {
74+
// res will have format: { response: 0, checkboxChecked: false }
75+
// res.response will be 0 if user chose 'Yes'
76+
// res.response will be 1 if user chose 'Cancel'
77+
if (res.response === 0) {
78+
this.clearImage({ route: this.activeRoute })
79+
this.source = this.imagePath[this.activeRoute]
80+
}
81+
})
82+
.catch(err => {
83+
console.log(err)
84+
})
85+
},
86+
87+
// imports image on browser
88+
// currently images aren't able to be stored on browser
89+
async importMockupBrowser () {
90+
// console.log(`importMockupBrowser: ${this.$refs.myFiles.files}`)
91+
this.files = this.$refs.myFiles.files[0]
92+
await this.importImage(this.files.name)
93+
// await console.log(this.files.name)
94+
},
95+
// removes image on browser
96+
removeImageBrowser () {
97+
this.clearImage()
98+
}
99+
},
100+
// watches for changes in state to activeRoute
101+
watch: {
102+
// once you change your active route, the mockup image should change as well
103+
activeRoute: function () {
104+
// console.log('Route has changed')
105+
if (this.imagePath[this.activeRoute]) {
106+
// if there is a uploaded image
107+
this.source = 'file:///' + this.imagePath[this.activeRoute]
108+
} else {
109+
this.source = ''
110+
}
111+
}
112+
}
113+
}
114+
</script>
115+
116+
<style lang="scss">
117+
.home-sidebar {
118+
margin: 1rem;
119+
justify-content: center;
120+
border-radius: 5px;
121+
padding: 0px;
122+
background: $subsecondary;
123+
}
124+
125+
.upload-btn {
126+
text-transform: capitalize;
127+
font-size: 12px;
128+
}
129+
130+
.upload {
131+
margin: 0.5rem;
132+
display: flex;
133+
justify-content: space-evenly;
134+
}
135+
136+
.file-path {
137+
padding-bottom: 1em;
138+
height: 100%;
139+
margin: 1rem;
140+
font-size: 11px;
141+
}
142+
143+
.file-header {
144+
padding-left: 0.4em;
145+
}
146+
147+
.file-content {
148+
padding: 0em 1em 1em 1em;
149+
}
150+
151+
.browser-btn {
152+
width: 90px;
153+
background: $secondary;
154+
}
155+
156+
.img {
157+
max-height: 200px;
158+
}
159+
</style>

‎src/utils/clearImage.util.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
1-
const { dialog } = require('electron').remote
2-
1+
// const { dialog } = require('electron').remote
2+
const { ipcRenderer } = window;
33
/**
44
* Fires the Electron dialog box to show an alert to confirm clear image
55
*/
66

7-
const clearImageDialog = () => {
7+
const clearImageDialog = async () => {
88
const options = {
99
buttons: ['Yes', 'Cancel'],
1010
message: 'Do you want to clear image?'
1111
}
12-
return dialog.showMessageBox(options)
12+
// return dialog.showMessageBox(options)
13+
const helper = await ipcRenderer.invoke('clearImage', options)
14+
.then(res => {
15+
console.log('Res from clear image util: ')
16+
console.log(res)
17+
return res;
18+
})
19+
.catch(err => console.log(err))
20+
21+
return helper;
1322
}
1423

1524
export default clearImageDialog

‎src/utils/uploadImage.util.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Telling main Electron process to open a dialog for open an image file
2-
const { dialog } = require('electron').remote
2+
// const { dialog } = require('electron').remote
3+
const { ipcRenderer } = window;
34

45
const types = [
56
{
@@ -18,13 +19,18 @@ const options = {
1819
* @returns { String } file path
1920
*/
2021

21-
const uploadImage = () => {
22-
const output = dialog.showOpenDialog(options)
23-
if (output) {
24-
// console.log('image output', output)
25-
return output[0]
26-
}
27-
return ''
22+
// Used in uploadImage.vue
23+
const uploadImage = async () => {
24+
const helper = await ipcRenderer.invoke('uploadImage', options)
25+
.then(res => {
26+
return res.filePaths[0]
27+
})
28+
.catch(err => {
29+
console.log(err);
30+
return err;
31+
})
32+
33+
return helper;
2834
}
2935

3036
export default uploadImage

0 commit comments

Comments
 (0)