Merge pull request #129 from stepanenko3/main

Delete backups, new discs select, fixes
spatie · Apr 12, 2022 · 79e1bee · 79e1bee
2 parents 5015ff1 + 4bf1818
commit 79e1bee
Show file tree

Hide file tree

Showing 8 changed files with 863 additions and 902 deletions.
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/components/Backup.vue b/resources/js/components/Backup.vue
@@ -20,7 +20,7 @@
                 :disabled="!deletable"
                 @click.prevent="$emit('delete')"
             >
-                <icon type="delete" />
+                <icon type="trash" view-box="0 0 24 24" width="20" height="20" />
             </button>
         </td>
     </tr>

diff --git a/resources/js/components/BackupStatuses.vue b/resources/js/components/BackupStatuses.vue
@@ -27,9 +27,12 @@
                 <td class="px-2 py-2 border-t border-gray-100 dark:border-gray-700 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ __(backupStatus.name) }}</td>
                 <td class="px-2 py-2 border-t border-gray-100 dark:border-gray-700 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ __(backupStatus.disk) }}</td>
                 <td class="px-2 py-2 border-t border-gray-100 dark:border-gray-700 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">
-                    <svg
-                        :is="backupStatus.healthy ? 'icon-healthy' : 'icon-unhealthy'"
-                        height="24px"
+                    <icon
+                        :class="backupStatus.healthy ? 'text-green-500' : 'text-red-500'"
+                        :type="backupStatus.healthy ? 'check-circle' : 'x-circle'"
+                        view-box="0 0 24 24"
+                        width="20"
+                        height="20"
                     />
                 </td>
                 <td class="px-2 py-2 border-t border-gray-100 dark:border-gray-700 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ backupStatus.amount }}</td>
@@ -41,17 +44,9 @@
 </template>
 
 <script>
-import IconHealthy from './icons/IconHealthy';
-import IconUnhealthy from './icons/IconUnhealthy';
-
 export default {
     props: {
         backupStatuses: { required: true, type: Array },
     },
-
-    components: {
-        IconHealthy,
-        IconUnhealthy,
-    },
 };
 </script>
diff --git a/resources/js/components/Backups.vue b/resources/js/components/Backups.vue
@@ -1,15 +1,14 @@
 <template>
     <div>
-        <div v-if="disks.length > 1" class="p-3 flex items-center border-b border-50">
-            <select
-                class="form-control form-select"
+        <div class="p-3 flex items-center"
+            v-if="disks.length > 1">
+            <SelectControl
+                class="w-full md:w-1/5"
+                size="lg"
+                :options="getDiscs()"
                 :value="activeDisk"
                 @input="$emit('update:activeDisk', $event.target.value)"
-            >
-                <option v-for="disk in disks" :key="disk" :value="disk">
-                    {{ disk }}
-                </option>
-            </select>
+            />
         </div>
 
         <div class="overflow-hidden overflow-x-auto relative rounded-lg">
@@ -49,30 +48,22 @@
             </table>
         </div>
 
-        <portal to="modals">
-            <transition name="fade">
-                <DeleteResourceModal
-                    v-if="deleteModalOpen"
-                    @confirm="confirmDelete"
-                    @close="closeDeleteModal"
-                    mode="delete"
-                >
-                    <div class="p-8">
-                        <heading :level="2" class="mb-6">
-                            {{ __('Delete backup') }}
-                        </heading>
-                        <p class="text-80 leading-normal">
-                            {{
-                                __(
-                                    'Are you sure you want to delete the backup created at :date ?',
-                                    { date: deletingBackup.date }
-                                )
-                            }}
-                        </p>
-                    </div>
-                </DeleteResourceModal>
-            </transition>
-        </portal>
+        <DeleteResourceModal
+            mode="delete"
+            :show="deleteModalOpen"
+            @close="closeDeleteModal"
+            @confirm="confirmDelete"
+        >
+            <ModalHeader v-text="__('Delete backup')" />
+            <ModalContent>
+                <p
+                    class="leading-normal"
+                    v-text="__('Are you sure you want to delete the backup created at :date ?', {
+                        date: deletingBackup.date,
+                    })"
+                />
+            </ModalContent>
+        </DeleteResourceModal>
     </div>
 </template>
 
@@ -100,6 +91,10 @@ export default {
     },
 
     methods: {
+        getDiscs() {
+            return this.disks.map(val => ({ value: val, label: val }));
+        },
+
         openDeleteModal(backup) {
             this.$emit('setModalVisibility', true);
             this.deleteModalOpen = true;

diff --git a/resources/js/components/icons/IconHealthy.vue b/resources/js/components/icons/IconHealthy.vue
diff --git a/resources/js/components/icons/IconUnhealthy.vue b/resources/js/components/icons/IconUnhealthy.vue
diff --git a/resources/views/navigation.blade.php b/resources/views/navigation.blade.php