#158 [sources] support images in /sources

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);

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>

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,

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
 

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'
 

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
 

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'
 

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: '阿喀琉人'

migrations/019-source-images.sql

@@ -0,0 +1,5 @@
+-- Up
+
+ALTER TABLE sources ADD COLUMN images TEXT NULL DEFAULT NULL;
+
+-- Down

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.body.fragments.join('@').replace(/\n/g, '|')}, ${req.body.comment}, ${req.body.link},
-            ${req.user ? req.user.id : null}, ${req.body.base}  
+            ${req.body.key || null}, ${req.body.images || null},
+            ${req.user ? req.user.id : null}, ${req.body.base}
         )
     `);
 

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() {