#230 [pl][terms] multiple categories for terms glossary

components/InclusiveDictionary.vue

@@ -21,7 +21,7 @@
                     <T>nouns.submit.action</T>
                 </button>
             </div>
-            <div class="btn-group mb-3 d-none d-lg-flex bg-white category-filter">
+            <div class="btn-group mb-3 d-none d-md-flex bg-white category-filter">
                 <button v-for="category in config.nouns.inclusive.categories"
                    :class="['btn btn-sm', filter === ':' + category ? 'btn-primary' : 'btn-outline-primary']"
                    @click="filter = filter === ':' + category ? '' : ':' + category"
@@ -62,7 +62,7 @@
                         </li>
                     </ul>
 
-                    <small v-if="s.el.base && entries[s.el.base]">
+                    <div v-if="s.el.base && entries[s.el.base]" class="small">
                         <p><strong><T>nouns.edited</T>:</strong></p>
                         <ul class="list-untyled">
                             <li v-for="w in entries[s.el.base].insteadOf" class="text-strike"><LinkedText :text="w" noicons/></li>
@@ -75,7 +75,7 @@
                             </span>
                             </li>
                         </ul>
-                    </small>
+                    </div>
                 </td>
                 <td>
                     <ul class="list-untyled">
@@ -324,10 +324,12 @@
         }
     }
 
-    .text-filter {
+    @include media-breakpoint-up('md', $grid-breakpoints) {
-        * {
+        .text-filter {
-            border-bottom-left-radius: 0;
+            * {
-            border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
         }
     }
     .category-filter {

components/TermsDictionary.vue

@@ -8,7 +8,7 @@
         </section>
 
         <section class="sticky-top">
-            <div class="input-group mb-3 bg-white">
+            <div class="input-group bg-white text-filter">
                 <span class="input-group-text">
                     <Icon v="filter"/>
                 </span>
@@ -21,6 +21,14 @@
                     <T>nouns.submit.action</T>
                 </button>
             </div>
+            <div class="btn-group mb-3 d-none d-md-flex bg-white category-filter">
+                <button v-for="category in config.nouns.terms.categories"
+                    :class="['btn btn-sm', filter === ':' + category ? 'btn-primary' : 'btn-outline-primary']"
+                    @click="filter = filter === ':' + category ? '' : ':' + category"
+                >
+                    {{ category }}
+                </button>
+            </div>
         </section>
 
         <Table :data="visibleEntries()" :columns="1" fixed :marked="(el) => !el.approved" ref="dictionarytable">
@@ -43,6 +51,14 @@
                         </template>
                     </p>
 
+                    <ul class="list-inline">
+                        <li v-for="category in s.el.categories" class="list-inline-item">
+                            <span class="badge bg-primary text-white">
+                                {{category}}
+                            </span>
+                        </li>
+                    </ul>
+
                     <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"/>
@@ -62,6 +78,14 @@
                                 </span>
                             </template>
                         </p>
+
+                        <ul class="list-inline">
+                            <li v-for="category in entries[s.el.base].categories" class="list-inline-item">
+                            <span class="badge bg-primary text-white">
+                                {{category}}
+                            </span>
+                            </li>
+                        </ul>
                     </div>
                 </td>
                 <td>
@@ -283,4 +307,20 @@
     .flag {
         height: 96px;
     }
+
+    @include media-breakpoint-up('md', $grid-breakpoints) {
+        .text-filter {
+            * {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+    }
+    .category-filter {
+        margin-top: -1px;
+        .btn {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
 </style>

components/TermsSubmitForm.vue

@@ -39,13 +39,13 @@
             </div>
 
             <div class="form-group">
-                <label class="text-nowrap"><strong>
+                <label><strong><T>nouns.terms.category</T>:</strong></label>
-                    <T>nouns.terms.category</T>
+                <a v-for="category in config.nouns.terms.categories"
-                </strong></label>
+                   href="#" :class="['badge border mx-1 text-decoration-none', form.categories.includes(category) ? 'bg-primary text-white' : 'bg-light text-primary']"
-                <select v-model="form.category" class="form-control form-control-sm">
+                   @click.prevent="form.categories = form.categories.includes(category) ? form.categories.filter(c => c !== category) : [...form.categories, category]"
-                    <option value=""></option>
+                >
-                    <option v-for="category in config.nouns.terms.categories" :value="category">{{category}}</option>
+                    {{ category }}
-                </select>
+                </a>
             </div>
 
             <div class="row" v-if="$isGranted('terms')">
@@ -102,7 +102,7 @@
                     term: [''],
                     original: [],
                     definition: '',
-                    category: '',
+                    categories: [],
                     flags: [],
                     images: [],
                     base: null,
@@ -122,7 +122,7 @@
                         term: [''],
                         original: [],
                         definition: '',
-                        category: '',
+                        categories: [],
                         flags: [],
                         images: [],
                         base: null,
@@ -136,7 +136,7 @@
                     term: word.term,
                     original: word.original,
                     definition: word.definition,
-                    category: word.category,
+                    categories: word.categories,
                     flags: word.flags,
                     images: word.images,
                     base: word.id,

locale/pl/config.suml

@@ -93,7 +93,6 @@ nouns:
             - 'orientacja seksualna'
             - 'orientacja romantyczna'
             - 'orientacja tertiarna'
-            - 'określenie orientacji romantycznej i seksualnej'
             - 'płeć'
             - 'ekspresja płciowa'
             - 'model relacji'

migrations/033-terms-multiple-categories.sql

@@ -0,0 +1,7 @@
+-- Up
+
+UPDATE terms SET category = 'orientacja seksualna,orientacja romantyczna' WHERE category='określenie orientacji romantycznej i seksualnej';
+
+-- Down
+
+UPDATE terms SET category = 'określenie orientacji romantycznej i seksualnej' WHERE category='orientacja seksualna,orientacja romantyczna';

server/routes/terms.js

@@ -63,7 +63,7 @@ router.post('/terms/submit', handleErrorAsync(async (req, res) => {
             ${id},
             ${req.body.term.join('|')}, ${req.body.original.join('|')}, ${req.body.definition},
             0, ${req.body.base}, ${global.config.locale}, ${req.user ? req.user.id : null},
-            ${req.body.category}, ${JSON.stringify(req.body.flags)}, ${req.body.images}
+            ${req.body.categories.join(',')}, ${JSON.stringify(req.body.flags)}, ${req.body.images}
         )
     `);
 

src/classes.js

@@ -725,7 +725,7 @@ export class TermsEntry {
         this.original = original ? original.split('|') : [];
         this.definition = definition;
         this.author = author;
-        this.category = category;
+        this.categories = category ? category.split(',') : [];
         this.flags = JSON.parse(flags);
         this.images = images ? images.split(',') : [];
         this.approved = !!approved;
@@ -737,6 +737,10 @@ export class TermsEntry {
             return true;
         }
 
+        if (filter.startsWith(':')) {
+            return this.categories.includes(filter.substring(1));
+        }
+
         for (let field of ['term', 'original']) {
             for (let value of this[field]) {
                 if (value.toLowerCase().indexOf(filter.toLowerCase()) > -1) {