feat(fe smartblock): added criteria toggle to smart block element

resources/js/components/content/partials/TrackList.vue

@@ -13,6 +13,12 @@ const props = defineProps({
   }
 })
 
+const hiddenCriteria = [
+    'sort',
+    'repeat_tracks',
+    'overflow_tracks'
+]
+
 const trackList = ref([])
 const openElements = ref([])
 
@@ -44,17 +50,11 @@ onMounted(() => {
   console.log(trackList.value)
 })
 
-// watch(trackList.value, (newPos) => {
-//   console.log(newPos)
-//   trackList.value = newPos.map((el, key) => {
-//     el.position = key
-//     return el
-//   })
-// })
-
 const checkMove = (e) => {
-  //change position, or use key index to create position in controller
-  console.log(trackList.value, e.draggedContext)
+  //if block element close criteria to avoid errors
+  if (openElements.value.includes(e.draggedContext.index)) {
+    delete openElements.value[openElements.value.indexOf(e.draggedContext.index)]
+  }
 }
 
 watch(trackList, (newVal, oldVal) => {
@@ -80,6 +80,7 @@ const change = (event) => {
       trackList.value[event.added.newIndex].title = event.added.element.name
       trackList.value[event.added.newIndex].subtitle = event.added.element.creator.login
     }
+    trackList.value[event.added.newIndex].db_element = event.added.element
   }
   emit('updateTracks', trackList.value)
 }
@@ -98,6 +99,14 @@ const toggleElement = (index) => {
   console.log(openElements.value)
 }
 
+const printCriteria = (criteria) => {
+  if (criteria.criteria === 'limit') {
+    return `Limite a ${criteria.value} ${criteria.modifier}`
+  } else {
+    return `${criteria.criteria} ${criteria.modifier} ${criteria.value}`
+  }
+}
+
 defineExpose({ draggable });
 </script>
 
@@ -122,8 +131,9 @@ defineExpose({ draggable });
           <v-list-item-subtitle v-html="element.subtitle"></v-list-item-subtitle>
           <v-list-item-subtitle
               v-if="openElements.includes(index)"
-              v-for="criteria in element.db_element.criteria"
-              v-html="JSON.stringify(criteria)"
+              v-for="criteria in element.db_element.criteria.filter(el => hiddenCriteria.indexOf(el.criteria) === -1)"
+              v-html="printCriteria(criteria)"
+              class="criteria"
           >
 
           </v-list-item-subtitle>
@@ -151,4 +161,11 @@ defineExpose({ draggable });
     min-height: 200px;
     background-color: gray;
   }
+  .criteria {
+    margin: 2px 0;
+    opacity: 1
+  }
+  .v-list-item-subtitle:not(.criteria) + .criteria {
+    margin-top: 8px;
+  }
 </style>