Related objects filter in filter box

locales/default.pot

@@ -1609,6 +1609,21 @@ msgstr ""
 msgid "Error while creating new object."
 msgstr ""
 
+msgid "Edit related objects"
+msgstr ""
+
+msgid "Choose object type"
+msgstr ""
+
+msgid "Choose relation"
+msgstr ""
+
+msgid "Filter to apply"
+msgstr ""
+
+msgid "Search related objects"
+msgstr ""
+
 msgid "Action"
 msgstr ""
 

locales/en_US/default.po

@@ -1612,6 +1612,21 @@ msgstr ""
 msgid "Error while creating new object."
 msgstr ""
 
+msgid "Edit related objects"
+msgstr ""
+
+msgid "Choose object type"
+msgstr ""
+
+msgid "Choose relation"
+msgstr ""
+
+msgid "Filter to apply"
+msgstr ""
+
+msgid "Search related objects"
+msgstr ""
+
 msgid "Action"
 msgstr ""
 

locales/it_IT/default.po

@@ -1631,6 +1631,21 @@ msgstr "Dato obbligatorio mancante \"${ required }\". Riprovare"
 msgid "Error while creating new object."
 msgstr "Si è verificato un errore durante la creazione del nuovo oggetto."
 
+msgid "Edit related objects"
+msgstr "Modifica oggetti correlati"
+
+msgid "Choose object type"
+msgstr "Scegli il tipo di oggetto"
+
+msgid "Choose relation"
+msgstr "Scegli la relazione"
+
+msgid "Filter to apply"
+msgstr "Filtro da applicare"
+
+msgid "Search related objects"
+msgstr "Cerca oggetti correlati"
+
 msgid "Action"
 msgstr "Azione"
 

resources/js/app/app.js

@@ -111,6 +111,7 @@
         FieldTextarea: () => import(/* webpackChunkName: "field-textarea" */'app/components/form/field-textarea'),
         FieldTitle: () => import(/* webpackChunkName: "field-title" */'app/components/form/field-title'),
         ObjectInfo: () => import(/* webpackChunkName: "object-info" */'app/components/object-info/object-info'),
+        RelatedObjectsFilter: () => import(/* webpackChunkName: "related-objects-filter" */'app/components/related-objects-filter/related-objects-filter'),
         ModuleProperties: () => import(/* webpackChunkName: "module-properties" */'app/components/module/module-properties'),
         ModuleSetup: () => import(/* webpackChunkName: "module-setup" */'app/components/module/module-setup'),
         AddRelatedById: () => import(/* webpackChunkName: "add-related-by-id" */'app/components/add-related-by-id/add-related-by-id'),
@@ -624,6 +625,7 @@
 
 // use component everywhere in Manager
 Vue.component('AppIcon', AppIcon);
+Vue.component('ClipboardItem', _vueInstance.$options.components.ClipboardItem);
 Vue.component('DateRangesView', _vueInstance.$options.components.DateRangesView);
 Vue.component('FieldCheckbox', _vueInstance.$options.components.FieldCheckbox);
 Vue.component('FieldGeoCoordinates', _vueInstance.$options.components.FieldGeoCoordinates);
@@ -643,5 +645,7 @@
 Vue.component('ObjectCategories', _vueInstance.$options.components.ObjectCategories);
 Vue.component('ObjectCaptions', _vueInstance.$options.components.ObjectCaptions);
 Vue.component('ObjectInfo', _vueInstance.$options.components.ObjectInfo);
+Vue.component('RelatedObjectsFilter', _vueInstance.$options.components.RelatedObjectsFilter);
+Vue.component('Thumbnail', _vueInstance.$options.components.Thumbnail);
 Vue.component('RibbonItem', _vueInstance.$options.components.RibbonItem);
 Vue.component('UploadedObject', _vueInstance.$options.components.UploadedObject);

resources/js/app/components/filter-box.vue

@@ -38,6 +38,10 @@ export default {
             default: '[10]'
         },
         filterActive: Boolean,
+        filterRelationsActive: {
+            type: Boolean,
+            default: false
+        },
         filterList: {
             type: Array,
             default: () => [],
@@ -81,7 +85,9 @@ export default {
              * When disabled, only direct children are fetched.
              * This will switch the API filter between `parent` and `ancestor`.
              */
+            editFilterRelations: this.filterRelationsActive,
             filterByDescendants: false,
+            filterRelations: {},
             folder: null,
             moreFilters: this.filterActive,
             pageSize: this.pagination.page_size,
@@ -364,6 +370,10 @@ export default {
 
             const filter = this.prepareFilters();
             const filterObject = { ...this.queryFilter, filter };
+            filterObject.filter = {
+                ...filterObject.filter,
+                ...this.filterRelations,
+            };
             this.availableFilters = this.filtersByType?.[filterObject?.filter?.type] || [];
             this.$emit('filter-objects', filterObject);
         },
@@ -461,6 +471,20 @@ export default {
             delete this.queryFilter.filter[oldFilter];
             this.queryFilter.filter[newFilter] = this.folder?.id || null;
         },
+
+        toggleFilterRelations() {
+            this.editFilterRelations = !this.editFilterRelations;
+        },
+
+        updateFilterRelations(filter) {
+            this.filterRelations = {};
+            for (const [key, value] of Object.entries(filter)) {
+                this.filterRelations[key] = [];
+                for (const v of value) {
+                    this.filterRelations[key].push(v);
+                }
+            }
+        },
     }
 };
 </script>

resources/js/app/components/object-info/object-info.vue

@@ -57,7 +57,7 @@ export default {
         fillData() {
             const source = BEDITA?.indexLists?.[this.reloadedData?.type] || {};
             this.fields = source || ['title', 'description'];
-            this.fields = this.fields.filter((value, index, array) => {
+            this.fields = this.fields?.filter((value, index, array) => {
                 return array.indexOf(value) === index;
             });
             for (const field of this.fields) {

resources/js/app/components/related-objects-filter/related-objects-filter.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="related-objects-filter">
+        <template v-if="openPanel">
+            <related-objects-panel
+                :initial-filter="initialFilter"
+                :relations-schema="relationsSchema"
+                :show-panel="openPanel"
+                @update:filter="updateData('filter', $event)"
+                @update:objectsMap="updateData('objectsMap', $event)"
+                @update:showPanel="updateData('openPanel', $event)"
+            />
+        </template>
+        <template v-if="filter">
+            <div class="filter-to-apply">
+                <div
+                    v-for="relationName in Object.keys(filter)"
+                    :key="relationName"
+                >
+                    <template v-if="filter?.[relationName]?.length">
+                        <span class="tag relation">{{ tr(relationName) }}</span>
+                        <template v-for="relatedId in filter[relationName]">
+                            <div
+                                class="tag"
+                                :class="moduleClass(relatedId)"
+                                :key="relatedId"
+                            >
+                                [{{ relatedId }}] {{ objectsMap?.[relatedId]?.title }}
+                                <a
+                                    class="unpick"
+                                    @click.prevent="pickout(relationName, relatedId)"
+                                >
+                                    <app-icon
+                                        icon="carbon:close"
+                                        width="18"
+                                        height="18"
+                                    />
+                                </a>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+
+                <button
+                    class="mt-1 button button-outlined is-small"
+                    @click.prevent="openPanel = true"
+                >
+                    <app-icon icon="carbon:edit" />
+                    <span class="ml-05">{{ msgEdit }}</span>
+                </button>
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'RelatedObjectsFilter',
+    components: {
+        'related-objects-panel': () => import('./related-objects-panel.vue'),
+    },
+    props: {
+        initialFilter: {
+            type: Object,
+            default: () => ({}),
+        },
+        relationsSchema: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            filter: null,
+            msgEdit: t`Edit related objects`,
+            objectsMap: null,
+            openPanel: false,
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.initialFilter) {
+                const relationNames = Object.keys(this.relationsSchema);
+                const relationKeys = Object.keys(this.initialFilter).filter((key) => relationNames.includes(key));
+                this.filter = relationKeys.reduce((acc, key) => {
+                    acc[key] = this.initialFilter[key];
+                    return acc;
+                }, {});
+            } else {
+                this.openPanel = true;
+            }
+        });
+    },
+    methods: {
+        moduleClass(item) {
+            const objectType = this.objectsMap?.[item]?.type || null;
+            if (!objectType) {
+                return '';
+            }
+
+            return `has-background-module-${objectType}`;
+        },
+        pickout(relationName, relatedId) {
+            if (this.filter?.[relationName]) {
+                this.filter[relationName] = this.filter[relationName].filter((id) => id !== relatedId);
+                this.updateFilter();
+            }
+        },
+        tr(item) {
+            return BEDITA_I18N?.[item] || this.t(item) || item;
+        },
+        updateData(key, value) {
+            this.$emit('edit-filter-relations', true);
+            this[key] = value;
+            if (key === 'filter') {
+                this.updateFilter();
+            }
+        },
+        updateFilter() {
+            this.$forceUpdate();
+            this.$emit('update-filter-related', this.filter);
+        },
+    },
+}
+</script>
+<style scoped>
+div.related-objects-filter {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 0.5em;
+    justify-content: space-between;
+}
+</style>