From 42ed4c28f98a96c3ad9707375ae259355b8b131b Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Wed, 6 Jan 2021 15:38:05 +0100
Subject: [PATCH] #158 [sources] support images in /sources

---
 components/ImageUploader.vue     | 1 +
 components/Source.vue            | 3 +++
 components/SourceSubmitForm.vue  | 7 +++++++
 locale/de/translations.suml      | 1 +
 locale/en/translations.suml      | 1 +
 locale/es/translations.suml      | 1 +
 locale/pl/translations.suml      | 1 +
 locale/zh/translations.suml      | 8 ++++++++
 migrations/019-source-images.sql | 5 +++++
 server/routes/sources.js         | 7 ++++---
 src/classes.js                   | 2 ++
 11 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 migrations/019-source-images.sql

diff --git a/components/ImageUploader.vue b/components/ImageUploader.vue
index 71437452..7c924a41 100644
--- a/components/ImageUploader.vue
+++ b/components/ImageUploader.vue
@@ -41,6 +41,7 @@
                 if (!fileList.length) {
                     return;
                 }
+                this.drag = false;
                 const formData = new FormData();
                 for (let file of fileList) {
                     formData.append(fieldName, file, file.name);
diff --git a/components/Source.vue b/components/Source.vue
index 51c1cd61..5060709a 100644
--- a/components/Source.vue
+++ b/components/Source.vue
@@ -1,5 +1,8 @@
 <template>
     <div class="my-2" v-if="!deleted">
+        <div v-if="source.images.length" class="float-right">
+            <ImageThumb v-for="image in source.images" :id="image" class="m-2"/>
+        </div>
         <h3 class="h6">
             <Icon :v="source.icon()"/>
             <strong><template v-if="source.author">{{source.author.replace('^', '')}}</template><span v-if="source.author"> – </span><em><a v-if="source.link" :href="source.link" target="_blank" rel="noopener">{{source.title}}</a><span v-else>{{source.title}}</span></em></strong><template v-if="source.extra"> ({{source.extra}})</template>, {{source.year}}<template v-if="source.comment">; {{source.comment}}</template>
diff --git a/components/SourceSubmitForm.vue b/components/SourceSubmitForm.vue
index 3916c97c..f035feb5 100644
--- a/components/SourceSubmitForm.vue
+++ b/components/SourceSubmitForm.vue
@@ -77,6 +77,10 @@
                     <input type="url" id="link" class="form-control" v-model="form.link"
                            maxlength="255"/>
                 </div>
+                <div class="form-group">
+                    <label><T>sources.submit.images</T></label>
+                    <ImageWidget v-model="form.images" multiple/>
+                </div>
                 <div class="form-group" v-if="$isGranted('sources')">
                     <label for="key"><T>sources.submit.key</T></label>
                     <input type="text" id="key" class="form-control" v-model="form.key"
@@ -115,6 +119,7 @@
                     year: '',
                     fragments: [],
                     comment: '',
+                    images: [],
                     link: '',
                     key: null,
                     base: null,
@@ -142,6 +147,7 @@
                     year: '',
                     fragments: [],
                     comment: '',
+                    images: [],
                     link: '',
                     key: null,
                     base: null,
@@ -157,6 +163,7 @@
                     year: source.year,
                     fragments: source.fragments,
                     comment: source.comment,
+                    images: source.images,
                     link: source.link,
                     key: source.key,
                     base: source.id,
diff --git a/locale/de/translations.suml b/locale/de/translations.suml
index b656f430..29424e68 100644
--- a/locale/de/translations.suml
+++ b/locale/de/translations.suml
@@ -96,6 +96,7 @@ sources:
         moderation: 'Einreichungen müssen erst genehmigt werden, bevor sie veröffentlicht werden.'
         key: 'Key'  # TODO
         keyInfo: 'Identifier for linking sources between language versions and linking with the dictionary'  # TODO
+        images: 'Images' # TODO
     otherVersions: 'In other languages' # TODO
     referenced: 'Examples of use' # TODO
 
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index e5e829bf..394acd5e 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -96,6 +96,7 @@ sources:
         moderation: 'Submissions will have to get approved before getting published.'
         key: 'Key'
         keyInfo: 'Identifier for linking sources between language versions and linking with the dictionary'
+        images: 'Images'
     otherVersions: 'In other languages'
     referenced: 'Examples of use'
 
diff --git a/locale/es/translations.suml b/locale/es/translations.suml
index b19289c3..e252aa3e 100644
--- a/locale/es/translations.suml
+++ b/locale/es/translations.suml
@@ -96,6 +96,7 @@ sources:
         moderation: 'Los envíos deben ser aprobados antes de ser publicados.'
         key: 'Key'  # TODO
         keyInfo: 'Identifier for linking sources between language versions and linking with the dictionary'  # TODO
+        images: 'Images' # TODO
     otherVersions: 'In other languages' # TODO
     referenced: 'Examples of use' # TODO
 
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 1e08d1d0..4ecaf277 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -195,6 +195,7 @@ sources:
         moderation: 'Propozycje będą musiały zostać zatwierdzone przed opublikowaniem.'
         key: 'Klucz'
         keyInfo: 'Identyfikator do łączenia tekstów między wersjami językowymi i łączenia ze słownikiem'
+        images: 'Obrazki'
     otherVersions: 'W innych językach'
     referenced: 'Przykłady użycia'
 
diff --git a/locale/zh/translations.suml b/locale/zh/translations.suml
index 99b4c040..f1837ddf 100644
--- a/locale/zh/translations.suml
+++ b/locale/zh/translations.suml
@@ -94,6 +94,7 @@ sources:
         moderation: '提交的內容必須先獲得批准才能發布。'
         key: 'Key'  # TODO
         keyInfo: 'Identifier for linking sources between language versions and linking with the dictionary'  # TODO
+        images: 'Images' # TODO
     otherVersions: 'In other languages' # TODO
     referenced: 'Examples of use' # TODO
 
@@ -446,6 +447,13 @@ localise:
     long: 'Want to create a new language version? Check out'
     longLink: 'this manual!'
 
+images:
+    upload:
+        instruction: 'Click here or drag your pics here'  # TODO
+
+error:
+    generic: 'Something went wrong, please try again…'  # TODO
+
 flags:
     Abrosexual: '嫩性戀'
     Achillean: '阿喀琉人'
diff --git a/migrations/019-source-images.sql b/migrations/019-source-images.sql
new file mode 100644
index 00000000..14621e29
--- /dev/null
+++ b/migrations/019-source-images.sql
@@ -0,0 +1,5 @@
+-- Up
+
+ALTER TABLE sources ADD COLUMN images TEXT NULL DEFAULT NULL;
+
+-- Down
diff --git a/server/routes/sources.js b/server/routes/sources.js
index b2abd118..6f69b811 100644
--- a/server/routes/sources.js
+++ b/server/routes/sources.js
@@ -70,12 +70,13 @@ router.get('/sources/:id', async (req, res) => {
 router.post('/sources/submit', async (req, res) => {
     const id = ulid();
     await req.db.get(SQL`
-        INSERT INTO sources (id, locale, pronouns, type, author, title, extra, year, fragments, comment, link, key, submitter_id, base_id)
+        INSERT INTO sources (id, locale, pronouns, type, author, title, extra, year, fragments, comment, link, key, images, submitter_id, base_id)
         VALUES (
             ${id}, ${req.config.locale}, ${req.body.pronouns.join(';')},
             ${req.body.type}, ${req.body.author}, ${req.body.title}, ${req.body.extra}, ${req.body.year},
-            ${req.body.fragments.join('@').replace(/\n/g, '|')}, ${req.body.comment}, ${req.body.link}, ${req.body.key || null},
-            ${req.user ? req.user.id : null}, ${req.body.base}  
+            ${req.body.fragments.join('@').replace(/\n/g, '|')}, ${req.body.comment}, ${req.body.link},
+            ${req.body.key || null}, ${req.body.images || null},
+            ${req.user ? req.user.id : null}, ${req.body.base}
         )
     `);
 
diff --git a/src/classes.js b/src/classes.js
index b2877a64..5d400e11 100644
--- a/src/classes.js
+++ b/src/classes.js
@@ -104,6 +104,7 @@ export class Source {
              comment = null, link = null,
              submitter = null, approved, base_id = null,
              key = null, versions = [], locale = config.locale,
+             images = null,
     }) {
         this.id = id;
         this.pronouns = pronouns ? pronouns.split(';') : [];
@@ -121,6 +122,7 @@ export class Source {
         this.key = key;
         this.versions = versions.map(v => new Source(v));
         this.locale = locale;
+        this.images = images ? images.split(',') : [];
     }
 
     static get TYPES() {