Add confidence batch to radial mass annotator #4043

app/assets/stylesheets/base/panels.scss

@@ -1,51 +1,47 @@
 .panels-container {
   margin-top: $standard_padding;
   display: flex;
-  justify-content:space-between;
+  justify-content: space-between;
   width: 100%;
 }
 
-.panel h2, h3, h4, .subtitle {
-  font-weight: 500;
-}
-
 .panel {
   display: flex;
-  flex-direction:column;
-  justify-content:flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
   box-shadow: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
-  border-radius: .9rem;
+  border-radius: 0.9rem;
   background-color: $panel_background;
   a {
     text-decoration: none;
   }
-  
+
   h3 {
-    padding: $standard_padding*.2 0;
-    margin: $standard_padding*.2 0;
+    padding: $standard_padding * 0.2 0;
+    margin: $standard_padding * 0.2 0;
     display: flex;
     flex-direction: row;
   }
 
-  .subtitle { 
+  .subtitle {
     display: flex;
-    justify-content:space-between;
-    border-bottom: 1px solid $navigation_border;    
-  }  
+    justify-content: space-between;
+    border-bottom: 1px solid $navigation_border;
+  }
 
   .subheader {
     padding-top: $standard_padding * 0.5;
     font-weight: 700;
     font-size: $font_title;
-    border:none;
-  }  
+    border: none;
+  }
 
   .to-right {
-    position: absolute; 
-    top: 0; 
+    position: absolute;
+    top: 0;
     right: 0;
   }
-  
+
   .title-section {
     position: relative;
   }
@@ -58,68 +54,67 @@
     display: flex;
     min-height: 42px;
     font-size: $font_title;
-    align-items:center;
+    align-items: center;
     padding-left: $standard_padding;
     padding-right: $standard_padding;
     border-bottom: 2px solid transparent;
-    justify-content:space-between;  
-    position: relative; 
+    justify-content: space-between;
+    position: relative;
     a {
       font-size: $font_small;
-    }       
+    }
     span {
       b {
         font-size: $font_normal;
         opacity: 0.7;
       }
-    } 
+    }
   }
- 
+
   .nav-line {
     border-bottom: 2px solid $color-secondary-2-4;
-  } 
+  }
 
   .title.shared {
-    border-bottom:2px solid $color-secondary-1-3;
+    border-bottom: 2px solid $color-secondary-1-3;
   }
 
   .title.application_defined {
-    border-bottom:2px solid $color-primary-4;
+    border-bottom: 2px solid $color-primary-4;
   }
 
-
   .action-line {
-    border-bottom:2px solid $color-complement-3;
-  }  
+    border-bottom: 2px solid $color-complement-3;
+  }
 
   .navigation-bar-right {
     display: flex;
-    justify-content:flex-end; 
-    flex-direction: row; 
+    justify-content: flex-end;
+    flex-direction: row;
     align-items: center;
     padding-right: $standard_padding;
-  }   
+  }
 
   .navigation-bar-left {
     display: flex;
     height: 40px;
-    justify-content:flex-start; 
-    flex-direction: row; 
+    justify-content: flex-start;
+    flex-direction: row;
     align-items: center;
     padding-left: $standard_padding;
-  }                  
+  }
   .inline {
     display: flex;
-    flex-direction:row;
-    align-items:center;          
+    flex-direction: row;
+    align-items: center;
     text-decoration: none;
-  }  
+  }
 
   .disable {
     opacity: 0.5;
     background-color: $navigation_background;
     background-image: none !important;
-  }       
+  }
 
   .disable:hover {
     background-color: $navigation_background !important;
@@ -128,14 +123,13 @@
   }
 }
 
-
 .no-borders {
-  border:none !important;
+  border: none !important;
 }
 
 .no-shadow {
-  box-shadow:none !important;
-}  
+  box-shadow: none !important;
+}
 
 .content {
   padding: $standard_padding;

app/javascript/vue/components/radials/mass/components/Annotator/AnnotatorConfidence.vue

@@ -1,19 +1,36 @@
 <template>
   <div class="confidence_annotator">
-    <SmartSelector
-      class="margin-medium-bottom"
-      autocomplete-url="/controlled_vocabulary_terms/autocomplete"
-      :autocomplete-params="{ 'type[]': 'ConfidenceLevel' }"
-      get-url="/controlled_vocabulary_terms/"
-      model="confidence_levels"
-      button-class="button-submit"
-      buttons
-      inline
-      klass="Tag"
-      :target="objectType"
-      :custom-list="{ all: allList }"
-      @selected="createConfidence"
-    />
+    <h3>Mode</h3>
+    <ul class="no_bullets">
+      <li
+        v-for="(value, key) in MODE"
+        :key="key"
+      >
+        <label>
+          <input
+            type="radio"
+            :value="value"
+            v-model="selectedMode"
+          />
+          {{ key }}
+        </label>
+      </li>
+    </ul>
+    <div
+      color="create"
+      class="flex-wrap-row gap-small margin-large-top"
+    >
+      <VBtn
+        v-for="item in list"
+        :key="item.id"
+        :color="selectedMode == MODE.Add ? 'create' : 'destroy'"
+        medium
+        @click="createConfidence(item)"
+      >
+        <span v-html="item.object_tag" />
+      </VBtn>
+    </div>
+
     <ConfirmationModal
       ref="confirmationModalRef"
       :container-style="{ 'min-width': 'auto', width: '300px' }"
@@ -24,9 +41,11 @@
 <script setup>
 import { ref, onBeforeMount } from 'vue'
 import { ControlledVocabularyTerm, Confidence } from '@/routes/endpoints'
-import SmartSelector from '@/components/ui/SmartSelector.vue'
+import { QUERY_PARAM } from '@/components/radials/filter/constants/queryParam.js'
+import { ID_PARAM_FOR } from '@/components/radials/filter/constants/idParams.js'
 import ConfirmationModal from '@/components/ConfirmationModal.vue'
 import confirmationOpts from '../../constants/confirmationOpts.js'
+import VBtn from '@/components/ui/VBtn/index.vue'
 
 const props = defineProps({
   ids: {
@@ -37,18 +56,28 @@ const props = defineProps({
   objectType: {
     type: String,
     required: true
+  },
+
+  parameters: {
+    type: Object,
+    default: undefined
   }
 })
 
-const emit = defineEmits(['create'])
+const MODE = {
+  Add: 'add',
+  Remove: 'remove'
+}
 
 const confirmationModalRef = ref(null)
-const allList = ref([])
+const list = ref([])
+
+const selectedMode = ref(MODE.Add)
 
 onBeforeMount(() => {
   ControlledVocabularyTerm.where({ type: ['ConfidenceLevel'] }).then(
     ({ body }) => {
-      allList.value = body
+      list.value = body
     }
   )
 })
@@ -57,23 +86,27 @@ async function createConfidence(confidence) {
   const ok = await confirmationModalRef.value.show(confirmationOpts)
 
   if (ok) {
-    const promises = props.ids.map((id) => {
-      const payload = {
-        confidence_level_id: confidence.id,
-        confidence_object_id: id,
-        confidence_object_type: props.objectType
+    const idParam = ID_PARAM_FOR[props.objectType]
+    const queryParam = QUERY_PARAM[props.objectType]
+    const payload = {
+      mode: selectedMode.value,
+      confidence_level_id: confidence.id,
+      filter_query: {
+        [queryParam]: {
+          ...props.parameters
+        }
       }
+    }
 
-      return Confidence.create({ confidence: payload })
-    })
+    if (props.ids?.length) {
+      payload.filter_query[idParam] = props.ids
+    }
 
-    Promise.all(promises).then(() => {
-      emit(
-        'create',
-        promises.map((r) => r.body)
-      )
+    Confidence.batchByFilter(payload).then(() => {
       TW.workbench.alert.create(
-        'Note item(s) were successfully created',
+        `Confidence item(s) were successfully ${
+          selectedMode.value == MODE.Add ? 'created' : 'destroyed'
+        }`,
         'notice'
       )
     })

app/javascript/vue/components/radials/mass/constants/annotators.js

@@ -8,6 +8,7 @@ import AnnotatorDataAttribute from '../components/Annotator/DataAttribute/Annota
 
 export const ANNOTATORS = {
   all: {
+    Confidence: AnnotatorConfidence,
     'Data attributes': AnnotatorDataAttribute
   },
 

app/javascript/vue/routes/endpoints/Confidence.js

@@ -22,5 +22,8 @@ const permitParams = {
 export const Confidence = {
   ...baseCRUD(controller, permitParams),
 
-  exists: (params) => AjaxCall('get', `/${controller}/exists`, { params })
+  exists: (params) => AjaxCall('get', `/${controller}/exists`, { params }),
+
+  batchByFilter: (params) =>
+    AjaxCall('post', `/${controller}/batch_by_filter_scope`, params)
 }