[inclusive] clarification

components/InclusiveDictionary.vue

@@ -54,6 +54,10 @@
                         <li v-for="w in s.el.insteadOf" class="text-strike"><LinkedText :text="w" noicons/></li>
                     </ul>
 
+                    <div v-if="s.el.clarification" class="alert alert-warning px-2 py-1 small">
+                        <LinkedText :text="s.el.clarification"/>
+                    </div>
+
                     <ul class="list-inline">
                         <li v-for="category in s.el.categories" class="list-inline-item">
                             <a :href="`#:${category}`" class="badge bg-primary text-white" @click.prevent="filter = ':' + category">

components/InclusiveSubmitForm.vue

@@ -20,6 +20,14 @@
                             <T>inclusive.insteadOf</T>
                         </strong></label>
                         <NounForm v-model="form.insteadOf" maxlength="128"/>
+
+                        <div class="mt-2">
+                            <label>
+                                <input class="form-check-input" type="checkbox" v-model="clarification">
+                                <T>inclusive.clarification</T>
+                            </label>
+                            <input class="form-control" v-model="form.clarification" v-show="clarification"/>
+                        </div>
                     </div>
                 </div>
                 <div class="col-12 col-lg-6">
@@ -95,10 +103,12 @@
                     because: '',
                     categories: [],
                     links: [],
+                    clarification: null,
                     base: null,
                 },
                 submitting: false,
                 afterSubmit: false,
+                clarification: false,
             }
         },
         methods: {
@@ -113,8 +123,10 @@
                         because: '',
                         categories: [],
                         links: [],
+                        clarification: null,
                         base: null,
                     };
+                    this.clarification = false;
                 } finally {
                     this.submitting = false;
                 }
@@ -126,11 +138,22 @@
                     because: word.because,
                     categories: word.categories,
                     links: word.links,
+                    clarification: word.clarification,
                     base: word.id,
                 }
+                this.clarification = !!word.clarification;
                 this.afterSubmit = false;
                 this.$el.scrollIntoView();
             }
         },
+        watch: {
+            clarification(v) {
+                if (v) {
+                    this.form.clarification = this.$t('inclusive.clarificationDefault');
+                } else {
+                    this.form.clarification = null;
+                }
+            }
+        },
     };
 </script>

locale/pl/translations.suml

@@ -334,6 +334,8 @@ inclusive:
             jakich konstrukcji lepiej unikać i dlatego, oraz czym je zastępować.
     categories: 'Kategorie'
     sources: 'Linki źródłowe'
+    clarification: 'Załącz wyjaśnienie'
+    clarificationDefault: 'Chodzi oczywiście o użycie w tym pejoratywnym znaczeniu. Nie mówimy, żeby zupełnie nie używać tego słowa.'
 
 terminology:
     header: 'Terminologia'

migrations/054-inclusive-clarification.sql

@@ -0,0 +1,6 @@
+-- Up
+
+ALTER TABLE inclusive ADD COLUMN clarification TEXT NULL;
+
+-- Down
+

server/routes/inclusive.js

@@ -59,12 +59,12 @@ router.post('/inclusive/submit', handleErrorAsync(async (req, res) => {
 
     const id = ulid();
     await req.db.get(SQL`
-        INSERT INTO inclusive (id, insteadOf, say, because, approved, base_id, locale, author_id, categories, links)
+        INSERT INTO inclusive (id, insteadOf, say, because, approved, base_id, locale, author_id, categories, links, clarification)
         VALUES (
             ${id},
             ${req.body.insteadOf.join('|')}, ${req.body.say.join('|')}, ${req.body.because},
             0, ${req.body.base}, ${global.config.locale}, ${req.user ? req.user.id : null},
-            ${req.body.categories.join(',')}, ${JSON.stringify(req.body.links)}
+            ${req.body.categories.join(',')}, ${JSON.stringify(req.body.links)}, ${req.body.clarification || null}
         )
     `);
 

src/classes.js

@@ -715,7 +715,7 @@ export class NounDeclension {
 
 
 export class InclusiveEntry {
-    constructor({id, insteadOf, say, because, author, approved = true, base_id = null, categories = '', links = '[]'}) {
+    constructor({id, insteadOf, say, because, author, approved = true, base_id = null, categories = '', links = '[]', clarification = null}) {
         this.id = id;
         this.insteadOf = insteadOf.split('|');
         this.say = say.split('|');
@@ -725,6 +725,7 @@ export class InclusiveEntry {
         this.base = base_id;
         this.categories = categories ? categories.split(',') : [];
         this.links = JSON.parse(links);
+        this.clarification = clarification || null;
     }
 
     matches(filter) {