Disable drag & drop for unauthorized users

oslokommune · Sep 25, 2023 · 88381a0 · 88381a0
1 parent 09a565a
commit 88381a0
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,8 @@ All notable changes to this project will be documented in this file. The format
 - Improved WCAG compliance with respect to text color contrast.
 - Fixed a problem that would sometimes cause an "infinite spinner" when a new
   version of the app was deployed.
+- Unauthorized users can no longer attempt to drag and drop reorder
+  measurements.
 
 ### Changed
 

diff --git a/src/components/KpiWidgetGroup.vue b/src/components/KpiWidgetGroup.vue
@@ -24,43 +24,44 @@
         </pkt-button>
       </template>
     </div>
-    <draggable v-model="orderedKpis" animation="200">
+    <draggable v-if="hasEditRights" v-model="orderedKpis" animation="200">
       <transition-group class="kpi-widget-group__kpis">
-        <router-link
+        <kpi-widget-group-link
           v-for="kpi in orderedKpis"
           :key="kpi.id"
-          :to="{
-            name: 'ItemMeasurements',
-            params: { ...$route.params, kpiId: kpi.id },
-            query: { resultIndicatorPeriod: selectedPeriod?.key },
-          }"
-          class="kpi-widget-group__link"
-        >
-          <widget-kpi-card :kpi="kpi" :compact="compact" />
-        </router-link>
+          :kpi="kpi"
+          :compact="compact"
+        />
       </transition-group>
     </draggable>
+    <kpi-widget-group-link
+      v-for="kpi in orderedKpis"
+      v-else
+      :key="kpi.id"
+      :kpi="kpi"
+      :compact="compact"
+    />
   </div>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
 import html2canvas from 'html2canvas';
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import { periodDates } from '@/util';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import downloadFile from '@/util/downloadFile';
 import Kpi from '@/db/Kpi';
-import WidgetKpiCard from '@/components/widgets/WidgetKpiCard/WidgetKpiCard.vue';
+import KpiWidgetGroupLink from '@/components/KpiWidgetGroupLink.vue';
 import { compareKPIs } from '@/util/kpiHelpers';
 
 export default {
   name: 'KpiWidgetGroup',
 
   components: {
-    PktButton,
-    WidgetKpiCard,
     draggable,
+    KpiWidgetGroupLink,
+    PktButton,
   },
 
   props: {
@@ -85,6 +86,7 @@ export default {
 
   computed: {
     ...mapState(['activeItem', 'selectedPeriod']),
+    ...mapGetters(['hasEditRights']),
 
     itemSlug() {
       if (this.kpis.length && this.kpis[0]?.parent?.slug) {
@@ -165,48 +167,6 @@ export default {
     gap: 0.25rem;
   }
 
-  &__link {
-    text-decoration: none;
-    border: 2px solid transparent;
-
-    &.router-link-active {
-      border-color: var(--color-hover);
-
-      .kpi-card-widget {
-        border-color: var(--color-white);
-      }
-
-      ::v-deep .widget__header h3,
-      ::v-deep .period-trend-tag__value {
-        color: var(--color-hover);
-      }
-    }
-
-    .kpi-card-widget {
-      &:hover {
-        background: var(--color-gray-light);
-        border-color: var(--color-gray);
-
-        ::v-deep {
-          .widget__header h3,
-          .period-trend-tag__value {
-            color: var(--color-hover);
-          }
-
-          .period-trend-tag__trend {
-            &:before {
-              border-left-color: var(--color-gray-light);
-            }
-            &:after {
-              border-top-color: var(--color-gray-light);
-              border-bottom-color: var(--color-gray-light);
-            }
-          }
-        }
-      }
-    }
-  }
-
   &--compact {
     gap: 0.125rem;
     margin-bottom: 1rem;

diff --git a/src/components/KpiWidgetGroupLink.vue b/src/components/KpiWidgetGroupLink.vue
@@ -0,0 +1,88 @@
+<template>
+  <router-link
+    :key="kpi.id"
+    :to="{
+      name: 'ItemMeasurements',
+      params: { ...$route.params, kpiId: kpi.id },
+      query: { resultIndicatorPeriod: selectedPeriod?.key },
+    }"
+    class="kpi-widget-group-link"
+  >
+    <widget-kpi-card :kpi="kpi" :compact="compact" />
+  </router-link>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import WidgetKpiCard from '@/components/widgets/WidgetKpiCard/WidgetKpiCard.vue';
+
+export default {
+  name: 'KpiWidgetGroupLink',
+
+  components: {
+    WidgetKpiCard,
+  },
+
+  props: {
+    kpi: {
+      type: Object,
+      required: true,
+    },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  computed: {
+    ...mapState(['selectedPeriod']),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.kpi-widget-group-link {
+  text-decoration: none;
+  border: 2px solid transparent;
+
+  &.router-link-active {
+    border-color: var(--color-hover);
+
+    .kpi-card-widget {
+      border-color: var(--color-white);
+    }
+
+    ::v-deep .widget__header h3,
+    ::v-deep .period-trend-tag__value {
+      color: var(--color-hover);
+    }
+  }
+
+  .kpi-card-widget {
+    &:hover {
+      background: var(--color-gray-light);
+      border-color: var(--color-gray);
+
+      ::v-deep {
+        .widget__header h3,
+        .period-trend-tag__value {
+          color: var(--color-hover);
+        }
+
+        .period-trend-tag__trend {
+          &:before {
+            border-left-color: var(--color-gray-light);
+          }
+          &:after {
+            border-top-color: var(--color-gray-light);
+            border-bottom-color: var(--color-gray-light);
+          }
+        }
+      }
+    }
+  }
+}
+</style>