From b3f350a0a06d45a839c41e1fd90d15eb2b0fd85a Mon Sep 17 00:00:00 2001
From: Vinzenz Rosenkranz <vinzenz.rosenkranz@uni-tuebingen.de>
Date: Wed, 16 Oct 2024 10:26:20 +0200
Subject: [PATCH] add attribute usage indicator

Signed-off-by: Vinzenz Rosenkranz <vinzenz.rosenkranz@uni-tuebingen.de>
---
 CHANGELOG.md                                  |  6 ++-
 app/Http/Controllers/EditorController.php     |  2 +-
 resources/js/components/AttributeList.vue     | 11 ++--
 resources/js/components/DataModel.vue         | 11 +++-
 .../dme/AttributeUsageIndicator.vue           | 53 +++++++++++++++++++
 resources/js/i18n/de.json                     |  1 +
 resources/js/i18n/en.json                     |  1 +
 7 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 resources/js/components/dme/AttributeUsageIndicator.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f01d1c090..b66cda0c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-## 0.10.1 - Dayjs Hotfix
+## 0.11 -
+### Added
+- Indicator in _Data Model Editor_ that visualizes if an attribute is used in any entity-type
+
+## 0.10.1
 ### Fixed
 - Frontend errors due to wrong dayjs import
 
diff --git a/app/Http/Controllers/EditorController.php b/app/Http/Controllers/EditorController.php
index 50e44d2ac..cc964b269 100644
--- a/app/Http/Controllers/EditorController.php
+++ b/app/Http/Controllers/EditorController.php
@@ -83,7 +83,7 @@ public function getAttributes() {
                 'error' => __('You do not have the permission to view entity data')
             ], 403);
         }
-        $attributes = Attribute::whereNull('parent_id')->orderBy('id')->get();
+        $attributes = Attribute::whereNull('parent_id')->withCount('entity_types')->orderBy('id')->get();
         $selections = [];
         foreach($attributes as $a) {
             $selection = $a->getSelection();
diff --git a/resources/js/components/AttributeList.vue b/resources/js/components/AttributeList.vue
index 5188ace7a..3f56adfaa 100644
--- a/resources/js/components/AttributeList.vue
+++ b/resources/js/components/AttributeList.vue
@@ -14,22 +14,25 @@
             <div
                 v-if="!state.hiddenAttributeList[element.id] || showHidden"
                 class="mb-3 px-2"
-            >
                 :class="clFromMetadata(element)"
                 @mouseenter="onEnter(index)"
                 @mouseleave="onLeave(index)"
-                >
+            >
                 <div
                     class="row"
                     :class="addModerationStateClasses(element.id)"
                 >
                     <label
                         v-if="!state.hideLabels"
-                        class="col-form-label col-md-3 d-flex flex-row justify-content-between text-break"
+                        class="col-form-label col-md-3 d-flex flex-row justify-content-between gap-1 text-break"
                         :for="`attr-${element.id}`"
                         :class="attributeClasses(element)"
                         @click="e => handleLabelClick(e, element.datatype)"
                     >
+                        <slot
+                            name="preceding"
+                            :attribute="element"
+                        />
                         <div
                             v-show="!!state.hoverStates[index]"
                             class="btn-fab-list"
@@ -623,7 +626,7 @@
                 updateDirtyState,
                 resetListValues,
                 undirtyList,
-                setRef,
+                setRef, 
                 onEditHandler,
                 onRemoveHandler,
                 onDeleteHandler,
diff --git a/resources/js/components/DataModel.vue b/resources/js/components/DataModel.vue
index 7040b9670..749f3275d 100644
--- a/resources/js/components/DataModel.vue
+++ b/resources/js/components/DataModel.vue
@@ -76,7 +76,11 @@
                     :is-source="true"
                     :show-info="true"
                     @delete-element="onDeleteAttribute"
-                />
+                >
+                    <template #preceding="{attribute}">
+                        <AttributeUsageIndicator :count="attribute.entity_types_count" />
+                    </template>
+                </attribute-list>
             </div>
         </div>
     </div>
@@ -97,6 +101,8 @@
     import store from '@/bootstrap/store.js';
     import router from '%router';
 
+    import AttributeUsageIndicator from '@/components/dme/AttributeUsageIndicator.vue';
+
     import {
         duplicateEntityType as duplicateEntityTypeApi,
         getEntityTypeOccurrenceCount,
@@ -117,6 +123,9 @@
     } from '@/helpers/modal.js';
 
     export default {
+        components: {
+            AttributeUsageIndicator,
+        },
         setup(props, context) {
             const { t } = useI18n();
             const currentRoute = useRoute();
diff --git a/resources/js/components/dme/AttributeUsageIndicator.vue b/resources/js/components/dme/AttributeUsageIndicator.vue
new file mode 100644
index 000000000..3cd19e366
--- /dev/null
+++ b/resources/js/components/dme/AttributeUsageIndicator.vue
@@ -0,0 +1,53 @@
+<template>
+    <span
+        class="rounded-circle align-self-center"
+        :class="state.colorIndicator"
+        :style="`width: ${size}px; height: ${size}px;`"
+        :title="t('main.datamodel.attribute.indicator_info', {cnt: count}, count)"
+    />
+</template>
+
+<script>
+    import {
+        computed,
+        reactive,
+    } from 'vue';
+
+    import { useI18n } from 'vue-i18n';
+
+    export default {
+        props: {
+            count: {
+                required: true,
+                type: Number,
+            },
+            size: {
+                required: false,
+                type: Number,
+                default: 8,
+            },
+        },
+        setup(props, context) {
+            const { t } = useI18n();
+
+            // FETCH
+
+            // FUNCTIONS
+
+            // DATA
+            const state = reactive({
+                positive: computed(_ => props.count > 0),
+                colorIndicator: computed(_ => state.positive ? 'bg-success' : 'bg-danger'),
+            });
+
+            // RETURN
+            return {
+                t,
+                // HELPERS
+                // LOCAL
+                // STATE
+                state,
+            };
+        },
+    };
+</script>
\ No newline at end of file
diff --git a/resources/js/i18n/de.json b/resources/js/i18n/de.json
index 7e5b79ac2..27934dc14 100644
--- a/resources/js/i18n/de.json
+++ b/resources/js/i18n/de.json
@@ -716,6 +716,7 @@
                 "title": "Verfügbare Attribute",
                 "add_button": "Attribut hinzufügen",
                 "show_hidden": "Ausgeblendete anzeigen",
+                "indicator_info": "Dieses Attribut wird aktuell in keinem Entitätstyp verwendet! | Dieses Attribut wird aktuell in einem Entitätstyp verwendet. | Dieses Attribut wird aktuell in {cnt} Entitätstypen verwendet.",
                 "modal": {
                     "new": {
                         "title": "Neues Attribut"
diff --git a/resources/js/i18n/en.json b/resources/js/i18n/en.json
index 64082f9c0..24a818eda 100644
--- a/resources/js/i18n/en.json
+++ b/resources/js/i18n/en.json
@@ -716,6 +716,7 @@
                 "title": "Available Attributes",
                 "add_button": "Add Attribute",
                 "show_hidden": "Show hidden",
+                "indicator_info": "This attribute is not currently used in any entity-type! | This attribute is currently used in one entity-type. | This attribute is currently used in {cnt} entity-types.",
                 "modal": {
                     "new": {
                         "title": "New Attribute"