Enable the Vue 3 front-end

resources/js/components/DestinationGroupSelector.vue

@@ -0,0 +1,68 @@
+<script setup>
+    import twofaccountService from '@/services/twofaccountService'
+    import groupService from '@/services/groupService'
+    import { UseColorMode } from '@vueuse/components'
+
+    const props = defineProps({
+        showDestinationGroupSelector: Boolean,
+        selectedAccountsIds: Array,
+        groups: Array
+    })
+    const destinationGroupId = ref(null)
+
+    const emit = defineEmits(['update:showDestinationGroupSelector', 'accounts-moved'])
+
+    /**
+     * Move accounts selected from the Edit mode to another group or withdraw them
+     */
+    async function moveAccounts() {
+        // Backend will associate all provided accounts with the selected group in the same move
+        // or withdraw the accounts if destination is 'no group' (id = 0)
+        if (destinationGroupId.value === 0) {
+            await twofaccountService.withdraw(props.selectedAccountsIds)
+        }
+        else await groupService.assign(props.selectedAccountsIds, destinationGroupId.value)
+
+        emit('accounts-moved')
+    }
+
+</script>
+
+<template>
+<!-- Group selector -->
+    <div class="container group-selector">
+        <div class="columns is-centered is-multiline">
+            <div class="column is-full has-text-centered">
+                {{ $t('groups.move_selected_to') }}
+            </div>
+            <div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
+                <div class="columns is-multiline">
+                    <div class="column is-full" v-for="group in groups" :key="group.id">
+                        <UseColorMode v-slot="{ mode }">
+                            <button class="button is-fullwidth" :class="{'is-link' : destinationGroupId === group.id, 'is-dark has-text-light is-outlined': mode == 'dark'}" @click="destinationGroupId = group.id">
+                                <span v-if="group.id === 0" class="is-italic">
+                                    {{ $t('groups.no_group') }}
+                                </span>
+                                <span v-else>
+                                    {{ group.name }}
+                                </span>
+                            </button>
+                        </UseColorMode>
+                    </div>
+                </div>
+                <div class="columns is-centered">
+                    <div class="column has-text-centered">
+                        <RouterLink :to="{ name: 'groups' }" >{{ $t('groups.manage_groups') }}</RouterLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <VueFooter :showButtons="true">
+            <!-- Move to selected group button -->
+            <p class="control">
+                <button class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
+            </p>
+            <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
+        </VueFooter>
+    </div>
+</template>