satellite/admin/back-office/ui: use composition API

This change migrates Vue components of the new satellite admin web app from the options API to the composition API. Change-Id: Ie8c9bcd468f1c0fe0abc9ef0a3724563db096ba9
storj · Oct 30, 2023 · 42e1b08 · 42e1b08
1 parent 8f59535
commit 42e1b08
Show file tree

Hide file tree

Showing 48 changed files with 1,215 additions and 2,217 deletions.
diff --git a/satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue b/satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue
@@ -80,7 +80,7 @@
     </v-menu>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
 
 import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
@@ -92,24 +92,4 @@ import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
 import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
 import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
 import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
-
-export default {
-    name: 'AccountsActionsMenu',
-    components: {
-        VMenu,
-        VList,
-        VListItem,
-        VListItemTitle,
-        VDivider,
-        AccountResetMFADialog,
-        AccountSuspendDialog,
-        AccountDeleteDialog,
-        AccountNewProjectDialog,
-        AccountGeofenceDialog,
-        AccountUserAgentsDialog,
-        AccountLimitsDialog,
-        AccountInformationDialog,
-        AccountStatusDialog,
-    },
-};
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue b/satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue
@@ -78,7 +78,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account was deleted successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -87,7 +87,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -106,36 +107,11 @@ import {
     VAlert,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-        VAlert,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account was deleted successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue b/satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue
@@ -64,7 +64,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        The account placement was set successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -73,7 +73,7 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
     VDialog,
     VCard,
@@ -91,35 +91,11 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `The account placement was set successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue b/satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue
@@ -65,7 +65,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Successfully saved the account information.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -74,7 +74,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -92,35 +93,11 @@ import {
     VSelect,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-        VSelect,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Successfully saved the account information.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue b/satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue
@@ -85,7 +85,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="error">
-        {{ text }}
+        Error. Cannot change limits.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -94,7 +94,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -111,34 +112,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Error. Cannot change limits.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>
diff --git a/satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue b/satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue
@@ -58,7 +58,7 @@
     </v-dialog>
 
     <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        {{ text }}
+        Project created successfully.
         <template #actions>
             <v-btn color="default" variant="text" @click="snackbar = false">
                 Close
@@ -67,7 +67,8 @@
     </v-snackbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue';
 import {
     VDialog,
     VCard,
@@ -84,34 +85,11 @@ import {
     VSnackbar,
 } from 'vuetify/components';
 
-export default {
-    components: {
-        VDialog,
-        VCard,
-        VSheet,
-        VCardItem,
-        VCardTitle,
-        VBtn,
-        VDivider,
-        VForm,
-        VRow,
-        VCol,
-        VTextField,
-        VCardActions,
-        VSnackbar,
-    },
-    data() {
-        return {
-            snackbar: false,
-            text: `Project created successfully.`,
-            dialog: false,
-        };
-    },
-    methods: {
-        onButtonClick() {
-            this.snackbar = true;
-            this.dialog = false;
-        },
-    },
-};
+const snackbar = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+
+function onButtonClick() {
+    snackbar.value = true;
+    dialog.value = false;
+}
 </script>