#168 [pl] terms dictionary – add category and extra images

components/ImageThumb.vue

@@ -1,8 +1,8 @@
 <template>
-    <a :href="getUrl('big')" target="_blank" rel="noopener" class="d-inline-block"
-       @click.prevent="$eventHub.$emit('lightbox', getUrl('big'))"
+    <a :href="buildImageUrl(id, 'big')" target="_blank" rel="noopener" class="d-inline-block"
+       @click.prevent="$eventHub.$emit('lightbox', buildImageUrl(id, 'big'))"
     >
-        <img :src="getUrl('thumb')" class="border rounded-lg"/>
+        <img :src="buildImageUrl(id, 'thumb')" class="border rounded-lg"/>
     </a>
 </template>
 

components/TermsDictionary.vue

@@ -39,23 +39,36 @@
                 <td>
                     <p>
                         <strong>{{s.el.term.join(', ')}}</strong>
-                        <span v-if="s.el.original.length">({{s.el.original.join(', ')}})</span>
+                        <span v-if="s.el.original.length">({{s.el.original.join('; ')}})</span>
                         – {{s.el.definition}}
+                        <template v-if="s.el.category">
+                            <br/>
+                            <span class="badge badge-primary">
+                                {{s.el.category}}
+                            </span>
+                        </template>
                     </p>
 
-                    <p v-if="s.el.flags.length" class="text-center">
+                    <p v-if="s.el.flags.length || s.el.images.length" class="text-center">
                         <img v-for="flag in s.el.flags" :src="`/flags/${flag}.png`" class="flag m-1"/>
+                        <img v-for="image in s.el.images" :src="buildImageUrl(image, 'big')" class="flag m-1"/>
                     </p>
 
-                    <small v-if="s.el.base && entries[s.el.base]">
+                    <div class="small" v-if="s.el.base && entries[s.el.base]">
                         <p><strong><T>nouns.edited</T>:</strong></p>
 
                         <p>
                             <strong>{{s.el.term.join(', ')}}</strong>
-                            <span v-if="s.el.original.length">({{s.el.original.join(', ')}})</span>
+                            <span v-if="s.el.original.length">({{s.el.original.join('; ')}})</span>
                             – {{s.el.definition}}
+                            <template v-if="s.el.category">
+                                <br/>
+                                <span class="badge badge-primary">
+                                {{s.el.category}}
+                            </span>
+                            </template>
                         </p>
-                    </small>
+                    </div>
                 </td>
                 <td>
                     <ul class="list-unstyled list-btn-concise">

components/TermsSubmitForm.vue

@@ -40,10 +40,21 @@
                         </td>
                     </tr>
                     <tr v-if="$isGranted('terms')">
-                        <td colspan="3">
+                        <td :colspan="$isGranted('terms') ? 1 : 3">
+                            <T>nouns.terms.category</T>
+                            <select v-model="form.category" class="form-control form-control-sm">
+                                <option value=""></option>
+                                <option v-for="category in config.nouns.terms.categories" :value="category">{{category}}</option>
+                            </select>
+                        </td>
+                        <td v-if="$isGranted('terms')">
                             <T>profile.flags</T>
                             <ListInput v-model="form.flags" v-slot="s"/>
                         </td>
+                        <td v-if="$isGranted('terms')">
+                            <T>nouns.terms.images</T>
+                            <ImageWidget v-model="form.images" multiple/>
+                        </td>
                     </tr>
                     </tbody>
                 </table>
@@ -79,7 +90,9 @@
                     term: [''],
                     original: [],
                     definition: '',
+                    category: '',
                     flags: [],
+                    images: [],
                     base: null,
                 },
                 submitting: false,
@@ -97,7 +110,9 @@
                     term: [''],
                     original: [],
                     definition: '',
+                    category: '',
                     flags: [],
+                    images: [],
                     base: null,
                 };
             },
@@ -106,7 +121,9 @@
                     term: word.term,
                     original: word.original,
                     definition: word.definition,
+                    category: word.category,
                     flags: word.flags,
+                    images: word.images,
                     base: word.id,
                 }
                 this.afterSubmit = false;

locale/pl/config.suml

@@ -81,6 +81,13 @@ nouns:
         hashNamespace: 'inkluzywny'
     terms:
         enabled: false
+        categories:
+            - 'orientacja seksualna'
+            - 'orientacja romantyczna'
+            - 'określenie orientacji romantycznej i seksualnej'
+            - 'płeć'
+            - 'ekspresja płciowa'
+            - 'model relacji'
         hashNamespace: 'terminologia'
 
 names:

locale/pl/translations.suml

@@ -357,7 +357,9 @@ nouns:
                 Poniżej przedstawiamy słownik tłumaczący, co dane określenia oznaczają,
                 i jakie proponujemy dla nich polskie tłumaczenia.
         term: 'Określenie'
-        original: 'Pochodzenie'
+        original: 'Pochodzenie, określenie angielskie'
+        category: 'Kategoria'
+        images: 'Dodatkowe obrazki, spoza katalogu flag'
         definition: 'Definicja'
 
 names:

plugins/globals.js

@@ -23,4 +23,5 @@ export default ({ app, store }) => {
         }
     });
     store.commit('setSpelling', app.$cookies.get('spelling') || 'traditional');
+    Vue.prototype.buildImageUrl = (imageId, size) => `${process.env.BUCKET}/images/${imageId}-${size}.png`
 }

server/routes/terms.js

@@ -52,12 +52,12 @@ router.post('/terms/submit', async (req, res) => {
 
     const id = ulid();
     await req.db.get(SQL`
-        INSERT INTO terms (id, term, original, definition, approved, base_id, locale, author_id, flags)
+        INSERT INTO terms (id, term, original, definition, approved, base_id, locale, author_id, category, flags, images)
         VALUES (
             ${id},
             ${req.body.term.join('|')}, ${req.body.original.join('|')}, ${req.body.definition},
             0, ${req.body.base}, ${req.config.locale}, ${req.user ? req.user.id : null},
-            ${JSON.stringify(req.body.flags)}
+            ${req.body.category}, ${JSON.stringify(req.body.flags)}, ${req.body.images}
         )
     `);
 

src/classes.js

@@ -706,12 +706,14 @@ export class InclusiveEntry {
 }
 
 export class TermsEntry {
-    constructor({id, term, original, definition, flags = '[]', approved = true, base_id = null}) {
+    constructor({id, term, original, definition, category = null, flags = '[]', images = '', approved = true, base_id = null}) {
         this.id = id;
         this.term = term.split('|');
         this.original = original ? original.split('|') : [];
         this.definition = definition;
+        this.category = category;
         this.flags = JSON.parse(flags);
+        this.images = images ? images.split(',') : [];
         this.approved = !!approved;
         this.base = base_id;
     }