-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'filter_field_occurrences' of github.com:SpeciesFileGrou…
…p/taxonworks into filter_field_occurrences
- Loading branch information
Showing
6 changed files
with
298 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
app/javascript/vue/components/radials/mass/components/Annotator/Protocol/ProtocolList.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
| <div | ||
| color="create" | ||
| class="flex-wrap-row gap-small margin-large-top" | ||
| > | ||
| <VBtn | ||
| v-for="item in list" | ||
| :key="item.id" | ||
| :color="color" | ||
| medium | ||
| @click="() => emit('select', item)" | ||
| > | ||
| <span v-html="item.object_tag" /> | ||
| </VBtn> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import VBtn from '@/components/ui/VBtn/index.vue' | ||
| defineProps({ | ||
| color: { | ||
| type: String, | ||
| default: 'primary' | ||
| }, | ||
| list: { | ||
| type: Array, | ||
| default: () => [] | ||
| } | ||
| }) | ||
| const emit = defineEmits(['select']) | ||
| </script> |
151 changes: 151 additions & 0 deletions
151
app/javascript/vue/components/radials/mass/components/Annotator/Protocol/ProtocolMain.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| <template> | ||
| <div class="confidence_annotator"> | ||
| <VSpinner | ||
| v-if="isProcessing" | ||
| legend="Updating..." | ||
| /> | ||
| <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> | ||
|
|
||
| <component | ||
| :is="selectedMode.component" | ||
| :color="selectedMode.color" | ||
| :list="list" | ||
| @select="makeBatchRequest" | ||
| /> | ||
|
|
||
| <ConfirmationModal | ||
| ref="confirmationModalRef" | ||
| :container-style="{ 'min-width': 'auto', width: '300px' }" | ||
| /> | ||
|
|
||
| <VModal | ||
| v-if="isTableVisible" | ||
| @close="() => (isTableVisible = false)" | ||
| > | ||
| <template #header> | ||
| <h3>Response</h3> | ||
| </template> | ||
| <template #body> | ||
| <PreviewTable :data="response" /> | ||
| </template> | ||
| </VModal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref, onBeforeMount, shallowRef } from 'vue' | ||
| import { Protocol, ProtocolRelationship } from '@/routes/endpoints' | ||
| import { ID_PARAM_FOR } from '@/components/radials/filter/constants/idParams.js' | ||
| import { QUERY_PARAM } from '@/components/radials/filter/constants/queryParam.js' | ||
| import ConfidenceList from './ProtocolList.vue' | ||
| import ConfirmationModal from '@/components/ConfirmationModal.vue' | ||
| import PreviewTable from '@/components/radials/shared/PreviewTable.vue' | ||
| import VModal from '@/components/ui/Modal.vue' | ||
| import VSpinner from '@/components/ui/VSpinner.vue' | ||
| import ConfidenceReplace from './ProtocolReplace.vue' | ||
| const props = defineProps({ | ||
| ids: { | ||
| type: Array, | ||
| default: () => [] | ||
| }, | ||
| objectType: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| parameters: { | ||
| type: Object, | ||
| default: undefined | ||
| } | ||
| }) | ||
| const MODE = { | ||
| Add: { mode: 'add', component: ConfidenceList, color: 'create' }, | ||
| Remove: { mode: 'remove', component: ConfidenceList, color: 'destroy' }, | ||
| Replace: { mode: 'replace', component: ConfidenceReplace, color: 'primary' } | ||
| } | ||
| const confirmationModalRef = ref(null) | ||
| const list = ref([]) | ||
| const response = ref(null) | ||
| const isTableVisible = ref(false) | ||
| const isProcessing = ref(false) | ||
| const selectedMode = shallowRef(MODE.Add) | ||
| onBeforeMount(() => { | ||
| Protocol.all().then(({ body }) => { | ||
| list.value = body | ||
| }) | ||
| }) | ||
| async function makeBatchRequest(confidence) { | ||
| const ok = await confirmationModalRef.value.show({ | ||
| title: 'Protocols', | ||
| message: 'Are you sure you want to proceed?', | ||
| confirmationWord: 'UPDATE', | ||
| okButton: 'Create', | ||
| cancelButton: 'Cancel', | ||
| typeButton: 'submit' | ||
| }) | ||
| if (ok) { | ||
| const idParam = ID_PARAM_FOR[props.objectType] | ||
| const payload = Array.isArray(confidence) | ||
| ? makeReplacePayload(confidence) | ||
| : makePayload(confidence) | ||
| if (props.ids?.length) { | ||
| payload.filter_query[idParam] = props.ids | ||
| } | ||
| isProcessing.value = true | ||
| ProtocolRelationship.batchByFilter(payload) | ||
| .then(({ body }) => { | ||
| response.value = body | ||
| isTableVisible.value = true | ||
| }) | ||
| .finally(() => { | ||
| isProcessing.value = false | ||
| }) | ||
| } | ||
| } | ||
| function makePayload(protocol) { | ||
| return { | ||
| mode: selectedMode.value.mode, | ||
| protocol_id: protocol.id, | ||
| filter_query: { | ||
| [QUERY_PARAM[props.objectType]]: props.parameters | ||
| } | ||
| } | ||
| } | ||
| function makeReplacePayload([replace, to]) { | ||
| return { | ||
| mode: selectedMode.value.mode, | ||
| protocol_id: to.id, | ||
| replace_protocol_id: replace.id, | ||
| filter_query: { | ||
| [QUERY_PARAM[props.objectType]]: props.parameters | ||
| } | ||
| } | ||
| } | ||
| </script> |
96 changes: 96 additions & 0 deletions
96
app/javascript/vue/components/radials/mass/components/Annotator/Protocol/ProtocolReplace.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <template> | ||
| <div> | ||
| <ProtocolList | ||
| class="margin-medium-bottom" | ||
| :list="protocols" | ||
| @select="addItem" | ||
| /> | ||
|
|
||
| <table class="full_width margin-medium-bottom"> | ||
| <thead> | ||
| <tr> | ||
| <th class="half_width"> | ||
| Change | ||
| <VBtn | ||
| circle | ||
| color="primary" | ||
| :disabled="selected.length < 1" | ||
| @click="() => selected.splice(0, 1)" | ||
| > | ||
| <VIcon | ||
| name="trash" | ||
| x-small | ||
| /> | ||
| </VBtn> | ||
| </th> | ||
| <th class="half_width"> | ||
| To | ||
| <VBtn | ||
| circle | ||
| color="primary" | ||
| :disabled="!isFilled" | ||
| @click="() => selected.splice(1, 1)" | ||
| > | ||
| <VIcon | ||
| name="trash" | ||
| x-small | ||
| /> | ||
| </VBtn> | ||
| </th> | ||
| <th class="w-2"> | ||
| <VBtn | ||
| color="primary" | ||
| :disabled="!isFilled" | ||
| @click="() => selected.reverse()" | ||
| > | ||
| Flip | ||
| </VBtn> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td v-html="selected[0]?.object_tag"></td> | ||
| <td v-html="selected[1]?.object_tag"></td> | ||
| <td /> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <VBtn | ||
| color="update" | ||
| :disabled="!isFilled" | ||
| @click="() => emit('select', selected)" | ||
| > | ||
| Replace | ||
| </VBtn> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { computed, ref } from 'vue' | ||
| import ProtocolList from './ProtocolList.vue' | ||
| import VBtn from '@/components/ui/VBtn/index.vue' | ||
| import VIcon from '@/components/ui/VIcon/index.vue' | ||
| const props = defineProps({ | ||
| list: { | ||
| type: Array, | ||
| default: () => [] | ||
| } | ||
| }) | ||
| const emit = defineEmits(['select']) | ||
| const selected = ref([]) | ||
| const isFilled = computed(() => selected.value.length === 2) | ||
| const protocols = computed(() => | ||
| props.list.filter((item) => !selected.value.some((c) => c.id == item.id)) | ||
| ) | ||
| function addItem(item) { | ||
| if (selected.value.length < 2) { | ||
| selected.value.push(item) | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters