Skip to content

Commit 1570278

Browse files
jrcarretasjrcarretas
authored
Merge pull request #167 from First-Peoples-Cultural-Council/restore-oct-updates
Revert "Revert "fpcc-october-maintenance""
2 parents 2932159 + 669cfbe commit 1570278

23 files changed

+602
-291
lines changed

‎frontend/assets/images/help-icon.png

361 Bytes
Loading

‎frontend/components/AudioRecorder.vue

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,24 @@
136136
:commonly.sync="commonly"
137137
></CommunityOnly>
138138

139-
<b-button variant="dark" size="sm" @click="externalAudioUpload"
139+
<b-row class="field-row my-4">
140+
<b-form-checkbox
141+
id="is-agree"
142+
v-model="isAgree"
143+
class="d-inline-block ml-3"
144+
name="is-agree"
145+
>
146+
By uploading this I acknowledge that I own the copyright to this
147+
media. FPCC does not take responsibility for the content uploaded to
148+
the First Peoples’ Map of B.C.
149+
</b-form-checkbox>
150+
</b-row>
151+
152+
<b-button
153+
variant="dark"
154+
size="sm"
155+
:disabled="!isAgree"
156+
@click="externalAudioUpload"
140157
>Upload</b-button
141158
>
142159
<b-button
@@ -191,7 +208,8 @@ export default {
191208
audio: null,
192209
audioErrorMessage: null,
193210
recordingSupport: true,
194-
commonly: null
211+
commonly: null,
212+
isAgree: false
195213
}
196214
},
197215
computed: {
@@ -255,7 +273,7 @@ export default {
255273
}
256274
} catch (e) {
257275
console.error(e)
258-
this.$root.$on('fileUploadFailed', 'Audio')
276+
this.$root.$emit('fileUploadFailed', 'Audio')
259277
}
260278
}
261279

‎frontend/components/FileUploader.vue

Lines changed: 135 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
<template>
22
<div>
3-
<b-form-file
4-
ref="fileUpload"
5-
v-model="file"
6-
accept="image/*, video/*"
7-
class="file-upload-input"
8-
:placeholder="placeholder"
9-
drop-placeholder="Drop file here..."
10-
></b-form-file>
3+
<div class="upload-img-container mt-3">
4+
<div v-if="file" class="upload-img">
5+
<img
6+
v-if="fileSrc === null"
7+
class="upload-placeholder"
8+
:src="require(`@/assets/images/artist_icon.svg`)"
9+
/>
10+
<img v-else :src="fileSrc" />
11+
<b-button
12+
v-if="fileSrc !== null"
13+
class="upload-remove"
14+
@click="removeImg()"
15+
>Remove Image</b-button
16+
>
17+
</div>
18+
19+
<b-form-file
20+
ref="fileUpload"
21+
v-model="file"
22+
accept="image/*, video/*"
23+
class="file-upload-input"
24+
:placeholder="placeholder"
25+
drop-placeholder="Drop file here..."
26+
></b-form-file>
27+
</div>
28+
1129
<transition name="fade">
1230
<div v-if="file" class="mt-4">
13-
<div v-if="errorMessage">
14-
<b-alert variant="warning" show>{{ errorMessage }}</b-alert>
15-
</div>
1631
<b-row>
1732
<b-col xl="12">
1833
<label class="font-08" for="file-name">Title</label>
@@ -48,7 +63,28 @@
4863
:commonly.sync="commonly"
4964
></CommunityOnly>
5065

51-
<b-button variant="dark" size="sm" @click="handleUpload"
66+
<div v-if="errorMessage">
67+
<b-alert variant="warning" show>{{ errorMessage }}</b-alert>
68+
</div>
69+
70+
<b-row class="field-row my-4">
71+
<b-form-checkbox
72+
id="is-agree"
73+
v-model="isAgree"
74+
class="d-inline-block ml-3"
75+
name="is-agree"
76+
>
77+
By uploading this I acknowledge that I own the copyright to this
78+
media. FPCC does not take responsibility for the content uploaded to
79+
the First Peoples’ Map of B.C.
80+
</b-form-checkbox>
81+
</b-row>
82+
83+
<b-button
84+
variant="dark"
85+
size="sm"
86+
:disabled="!isAgree"
87+
@click="handleUpload"
5288
>Upload</b-button
5389
>
5490
<b-button
@@ -68,6 +104,14 @@ import ToolTip from '@/components/Tooltip.vue'
68104
import { getFormData } from '@/plugins/utils.js'
69105
import CommunityOnly from '@/components/CommunityOnly.vue'
70106
107+
const base64Encode = data =>
108+
new Promise((resolve, reject) => {
109+
const reader = new FileReader()
110+
reader.readAsDataURL(data)
111+
reader.onload = () => resolve(reader.result)
112+
reader.onerror = error => reject(error)
113+
})
114+
71115
export default {
72116
components: {
73117
ToolTip,
@@ -91,17 +135,36 @@ export default {
91135
return {
92136
fileName: '',
93137
file: null,
138+
fileSrc: null,
94139
description: '',
95140
errorMessage: null,
96141
successMessage: null,
97-
commonly: 'not_accepted'
142+
commonly: 'not_accepted',
143+
isAgree: false
98144
}
99145
},
100146
computed: {
101147
isArtwork() {
102148
return this.$route.query.type || this.$route.query.upload_artwork
103149
}
104150
},
151+
watch: {
152+
file(newValue, oldValue) {
153+
if (newValue !== oldValue) {
154+
if (newValue) {
155+
base64Encode(newValue)
156+
.then(value => {
157+
this.fileSrc = value
158+
})
159+
.catch(() => {
160+
this.fileSrc = null
161+
})
162+
} else {
163+
this.fileSrc = null
164+
}
165+
}
166+
}
167+
},
105168
methods: {
106169
resetToInitialState() {
107170
this.fileName = ''
@@ -111,6 +174,10 @@ export default {
111174
this.successMessage = null
112175
this.clearFiles()
113176
},
177+
removeImg() {
178+
this.file = null
179+
this.fileSrc = null
180+
},
114181
clearFiles() {
115182
this.$refs.fileUpload.reset()
116183
},
@@ -132,15 +199,14 @@ export default {
132199
result.request.statusText === 'Created'
133200
) {
134201
this.$root.$emit('fileUploaded', result.data)
202+
this.resetToInitialState()
135203
} else {
136204
throw result
137205
}
138206
} catch (e) {
139-
this.$root.$on('fileUploadFailed', 'File')
207+
this.$root.$emit('fileUploadFailed', 'File')
140208
}
141209
}
142-
143-
this.resetToInitialState()
144210
},
145211
getFormData() {
146212
return getFormData({
@@ -182,7 +248,7 @@ export default {
182248
}
183249
</script>
184250

185-
<style>
251+
<style lang="scss">
186252
.file-upload-input {
187253
font-size: 0.8em;
188254
overflow: hidden;
@@ -194,4 +260,56 @@ export default {
194260
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
195261
opacity: 0;
196262
}
263+
264+
.upload-img-container {
265+
display: flex;
266+
flex-direction: column;
267+
align-items: center;
268+
justify-content: center;
269+
width: 100%;
270+
margin: 0 auto;
271+
272+
.upload-img {
273+
position: relative;
274+
display: flex;
275+
align-items: center;
276+
justify-content: center;
277+
width: 150px;
278+
height: 150px;
279+
border-radius: 100%;
280+
border: 2px solid rgba(0, 0, 0, 0.125);
281+
margin-bottom: 0.5em;
282+
283+
&:hover {
284+
img {
285+
opacity: 0.5;
286+
}
287+
.upload-remove {
288+
display: block;
289+
opacity: 1;
290+
}
291+
}
292+
}
293+
img {
294+
width: 150px;
295+
height: 150px;
296+
border-radius: 100%;
297+
object-fit: cover;
298+
}
299+
300+
.upload-placeholder {
301+
width: 90px;
302+
height: 90px;
303+
object-fit: contain;
304+
border-radius: 0;
305+
}
306+
307+
.upload-remove {
308+
display: none;
309+
position: absolute;
310+
margin: auto auto;
311+
font-size: 0.75em;
312+
display: none;
313+
}
314+
}
197315
</style>

‎frontend/components/Flag/FlagModal.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
style="fill: white;"
1313
></MdFlagIcon
1414
>{{ title || 'Flag' }}
15-
<b-modal v-model="modalShow" hide-header @ok="handleSubmit">
15+
<b-modal v-model="modalShow" hide-header centered @ok="handleSubmit">
1616
<b-alert
1717
v-if="errorMessage"
1818
show
@@ -26,12 +26,12 @@
2626
:options="options"
2727
size="sm"
2828
></b-form-select>
29-
<div v-if="selected === 'c'">
29+
<div>
3030
<h5 class="font-08 mt-3">State a reason</h5>
3131
<b-form-textarea
3232
id="textarea"
3333
v-model="text"
34-
placeholder="Enter something..."
34+
placeholder="Enter reason for flagging this content..."
3535
rows="3"
3636
max-rows="6"
3737
></b-form-textarea>
@@ -80,15 +80,15 @@ export default {
8080
methods: {
8181
async handleSubmit(e) {
8282
e.preventDefault()
83-
if (!this.selected) {
84-
this.errorMessage = 'Please select an option'
83+
if (!this.selected || !this.text) {
84+
this.errorMessage = 'Please select an option, and state your reason.'
8585
return false
8686
}
87-
e.preventDefault()
88-
const reason =
89-
this.selected === 'c'
90-
? this.text
91-
: this.options.find(o => o.value === this.selected).text
87+
88+
const reason = `${
89+
this.options.find(o => o.value === this.selected).text
90+
}- ${this.text}`
91+
9292
const result = await this.submitFlag(this.id, reason)
9393
this.modalShow = false
9494
if (result.message === 'Flagged!') {

‎frontend/components/Gallery.vue

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
getMediaUrl(getCurrentMedia.media_file) ||
8181
getMediaUrl(getCurrentMedia.image)
8282
"
83+
oncontextmenu="return false;"
8384
/>
8485
<!-- Render Youtube Video Here -->
8586
<iframe
@@ -117,6 +118,7 @@
117118
isFullscreen ? 'img-fullscreen-mode' : ''
118119
}`
119120
"
121+
oncontextmenu="return false;"
120122
/>
121123
<span
122124
v-if="returnMediaType === 'image' || getCurrentMedia.image"
@@ -143,8 +145,16 @@
143145
:class="`arts-img-item ${mediaIndex === indx ? 'is-selected' : ''}`"
144146
@click="selectNewMedia(item)"
145147
>
146-
<img v-if="item.media_file" v-lazy="getMediaUrl(item.media_file)" />
147-
<img v-else v-lazy="getMediaUrl(item.image)" />
148+
<img
149+
v-if="item.media_file"
150+
v-lazy="getMediaUrl(item.media_file)"
151+
oncontextmenu="return false;"
152+
/>
153+
<img
154+
v-else
155+
v-lazy="getMediaUrl(item.image)"
156+
oncontextmenu="return false;"
157+
/>
148158
</div>
149159
</div>
150160
</div>

‎frontend/components/InformationModal.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@
4848
</template>
4949

5050
<script>
51-
import * as Cookies from 'js-cookie'
52-
5351
export default {
5452
methods: {
5553
handleClick(e) {
56-
Cookies.set('fpmap_info_modal_understood', true, {
57-
expires: new Date().getTime() + 30 * 24 * 60 * 60 * 1000
58-
})
54+
// Data expires after 30 days
55+
localStorage.setItem(
56+
'fpmap_info_modal_agreement_expiry_date',
57+
new Date().getTime() + 30 * 24 * 60 * 60 * 1000
58+
)
5959
this.$root.$emit('hideInformationModal')
6060
}
6161
}

0 commit comments

Comments
 (0)