#145 [terms] flags in glossary

components/TermsDictionary.vue

@@ -43,6 +43,10 @@
                         – {{s.el.definition}}
                     </p>
 
+                    <p v-if="s.el.flags.length" class="text-center">
+                        <img v-for="flag in s.el.flags" :src="`/flags/${flag}.png`" class="flag m-1"/>
+                    </p>
+
                     <small v-if="s.el.base && entries[s.el.base]">
                         <p><strong><T>nouns.edited</T>:</strong></p>
 
@@ -261,4 +265,8 @@
             }
         }
     }
+
+    .flag {
+        height: 96px;
+    }
 </style>

components/TermsSubmitForm.vue

@@ -39,10 +39,18 @@
                             <textarea v-model="form.definition" class="form-control form-control-sm" required rows="3"></textarea>
                         </td>
                     </tr>
+                    <tr v-if="$admin()">
+                        <td colspan="3">
+                            <T>profile.flags</T>
+                            <ListInput v-model="form.flags" v-slot="s"/>
+                        </td>
+                    </tr>
                     </tbody>
                 </table>
             </div>
 
+            <Debug :v="form"/>
+
             <div class="alert alert-info" v-if="form.base">
                 <Icon v="info-circle"/>
                 <T>nouns.editing</T>
@@ -73,6 +81,7 @@
                     term: [''],
                     original: [],
                     definition: '',
+                    flags: [],
                     base: null,
                 },
                 submitting: false,
@@ -90,6 +99,7 @@
                     term: [''],
                     original: [],
                     definition: '',
+                    flags: [],
                     base: null,
                 };
             },
@@ -98,6 +108,7 @@
                     term: word.term,
                     original: word.original,
                     definition: word.definition,
+                    flags: word.flags,
                     base: word.id,
                 }
                 this.afterSubmit = false;

migrations/013-terms-flags.sql

@@ -0,0 +1,6 @@
+-- Up
+
+ALTER TABLE terms ADD COLUMN flags TEXT NOT NULL DEFAULT '[]';
+
+-- Down
+

server/routes/terms.js

@@ -52,11 +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)
+        INSERT INTO terms (id, term, original, definition, approved, base_id, locale, author_id, flags)
         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}
+            0, ${req.body.base}, ${req.config.locale}, ${req.user ? req.user.id : null},
+            ${JSON.stringify(req.body.flags)}
         )
     `);
 

src/classes.js

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