Merge branch 'designerfields-drag-icon' into 'main'

Add drag icon to design field editors See merge request reportcreator/reportcreator!353
Syslifters · Nov 27, 2023 · 8d6b903 · 8d6b903
2 parents ed837e2 + 8596c10
commit 8d6b903
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/frontend/src/pages/designs/[projectTypeId]/findingfields.vue b/frontend/src/pages/designs/[projectTypeId]/findingfields.vue
@@ -20,7 +20,7 @@
             <draggable
               v-model="findingFields"
               item-key="id"
-              :group="{name: 'findingFields', put: ['predefinedFindingFields']}"
+              :group="{name: 'findingFields', put: ['findingFields', 'predefinedFindingFields']}"
               @add="addPredefinedField"
               :disabled="readonly"
             >
@@ -31,6 +31,9 @@
                   link
                   :ripple="false"
                 >
+                  <template #prepend>
+                    <v-icon icon="mdi-drag-horizontal" />
+                  </template>
                   <template #default>
                     <v-list-item-title class="text-body-2">{{ f.id }}</v-list-item-title>
                   </template>
@@ -49,7 +52,7 @@
             </draggable>
 
             <v-divider />
-            <v-list-group value="predefinedFields">
+            <v-list-group value="predefinedFields" fluid>
               <template #activator="{ props: listGroupProps }">
                 <v-list-item title="Predefined Fields" v-bind="listGroupProps" />
               </template>
@@ -64,7 +67,12 @@
                     class="draggable-item"
                     :ripple="false"
                   >
-                    <v-list-item-title class="text-body-2">{{ f.id }}</v-list-item-title>
+                    <template #prepend>
+                      <v-icon icon="mdi-drag" />
+                    </template>
+                    <template #default>
+                      <v-list-item-title class="text-body-2">{{ f.id }}</v-list-item-title>
+                    </template>
                   </v-list-item>
                 </template>
               </draggable>
@@ -206,4 +214,10 @@ function deleteField(fieldId: string) {
 .draggable-item {
   cursor: grab;
 }
+
+:deep(.v-list-item__prepend) {
+  .v-list-item__spacer {
+    width: 0.5em;
+  }
+}
 </style>
diff --git a/frontend/src/pages/designs/[projectTypeId]/reportfields.vue b/frontend/src/pages/designs/[projectTypeId]/reportfields.vue
@@ -26,6 +26,9 @@
                     link
                     class="draggable-handle"
                   >
+                    <template #prepend>
+                      <v-icon icon="mdi-drag-horizontal" />
+                    </template>
                     <template #append>
                       <btn-delete
                         v-if="s.fields.length === 0"
@@ -52,7 +55,12 @@
                     >
                       <template #item="{ element: f}">
                         <v-list-item :value="f" class="draggable-handle" :ripple="false" link>
-                          <v-list-item-title class="text-body-2">{{ f.id }}</v-list-item-title>
+                          <template #prepend>
+                            <v-icon icon="mdi-drag-horizontal" />
+                          </template>
+                          <template #default>
+                            <v-list-item-title class="text-body-2">{{ f.id }}</v-list-item-title>
+                          </template>
                           <template #append>
                             <btn-delete
                               v-if="f.origin !== FieldOrigin.CORE"
@@ -297,4 +305,10 @@ function deleteSection(section: ReportSectionDefinitionWithFieldDefinition) {
 .draggable-handle {
   cursor: grab;
 }
+
+:deep(.v-list-item__prepend) {
+  .v-list-item__spacer {
+    width: 0.5em;
+  }
+}
 </style>