|
10 | 10 | v-else |
11 | 11 | class="form-control" |
12 | 12 | > |
13 | | - <template v-if="migrationState.length == 0"> |
| 13 | + <template v-if="noMigrations"> |
14 | 14 | {{ t('main.plugins.info.no_migrations') }} |
15 | 15 | </template> |
16 | 16 | <template v-else> |
17 | 17 | <ul class="list-unstyled mb-0 overflow-x-auto"> |
18 | 18 | <li |
19 | | - v-for="migration in migrationState" |
| 19 | + v-for="migration in migrationList" |
20 | 20 | :key="migration.name" |
21 | 21 | class="d-flex justify-content-between align-items-center mb-1" |
22 | 22 | > |
23 | | - <button |
24 | | - v-if="migration.ran" |
25 | | - class="btn btn-sm btn-outline-success border-0" |
26 | | - disabled |
27 | | - > |
28 | | - <i |
29 | | - v-if="migration.ran" |
30 | | - class="fas fa-fw fa-check text-success" |
31 | | - /> |
32 | | - </button> |
33 | | - <button |
34 | | - v-else |
35 | | - class="btn btn-sm btn-outline-danger" |
36 | | - @click="addMigrationToDatabase(migration)" |
37 | | - > |
38 | | - <i |
39 | | - class="fas fa-fw fa-times" |
40 | | - :title="t('main.plugins.info.add_migration_to_db')" |
41 | | - /> |
42 | | - </button> |
43 | | - |
44 | | - <span class="ms-3">{{ migration.name }}</span> |
| 23 | + <MigrationItem |
| 24 | + :migration="migration" |
| 25 | + @set="addMigrationToDatabase" |
| 26 | + /> |
45 | 27 | </li> |
46 | 28 | </ul> |
47 | 29 | </template> |
48 | 30 | </div> |
49 | 31 | <div class="d-flex gap-2 flex-row-reverse"> |
50 | 32 | <button |
51 | 33 | class="btn btn-sm btn-outline-secondary" |
| 34 | + :disabled="hasMissingMigrations" |
52 | 35 | @click="migrate()" |
53 | 36 | > |
54 | 37 | {{ t('main.plugins.migrate') }} |
55 | 38 | </button> |
56 | 39 | <button |
57 | 40 | class="btn btn-sm btn-outline-secondary" |
| 41 | + :disabled="noMigrations" |
58 | 42 | @click="rollback()" |
59 | 43 | > |
60 | 44 | {{ t('main.plugins.rollback') }} |
61 | 45 | </button> |
62 | 46 |
|
63 | 47 | <button |
64 | 48 | class="btn btn-sm btn-outline-secondary" |
| 49 | + :disabled="noMigrations" |
65 | 50 | @click="updateMigrationState()" |
66 | 51 | > |
67 | 52 | Check Migration |
68 | 53 | </button> |
69 | 54 | </div> |
70 | | - |
71 | | - <alert :message="t('main.plugins.info.migration_notice')" /> |
72 | 55 | </div> |
73 | 56 | </template> |
74 | 57 |
|
75 | 58 | <script> |
76 | | - import { ref, onMounted } from 'vue'; |
| 59 | + import { computed, ref, onMounted } from 'vue'; |
77 | 60 | import { useI18n } from 'vue-i18n'; |
78 | 61 |
|
79 | 62 | // TODO:: move to api if still needed after rework |
80 | 63 | import http from '@/bootstrap/http.js'; |
| 64 | + import MigrationItem from './MigrationItem.vue'; |
81 | 65 |
|
82 | 66 | export default { |
| 67 | + components: { |
| 68 | + MigrationItem, |
| 69 | + }, |
83 | 70 | props: { |
84 | 71 | value: { |
85 | 72 | type: Object, |
|
88 | 75 | }, |
89 | 76 | setup(props) { |
90 | 77 | const { t } = useI18n(); |
91 | | - const migrationState = ref([]); |
| 78 | + const migrationList = ref([]); |
92 | 79 | const migrationLoaded = ref(false); |
93 | 80 |
|
94 | 81 | onMounted(() => { |
|
101 | 88 | const result = await http.post(`/plugin/migrate/${props.value.id}/force_add`, { |
102 | 89 | name: migration.name, |
103 | 90 | }); |
104 | | - migrationState.value = result.data; |
| 91 | + migrationList.value = result.data; |
105 | 92 | } catch(error) { |
106 | 93 | console.error('Error adding migration to database', error); |
107 | 94 | } |
|
123 | 110 | const updateMigrationState = async _ => { |
124 | 111 | try { |
125 | 112 | const result = await http.get(`/plugin/migrate/${props.value.id}/check`); |
126 | | - migrationState.value = result.data; |
| 113 | + migrationList.value = result.data; |
127 | 114 | migrationLoaded.value = true; |
128 | 115 | } catch(e) { |
129 | 116 | console.error('Error fetching migration state', e); |
130 | | - migrationState.value = []; |
| 117 | + migrationList.value = []; |
131 | 118 | } |
132 | 119 | }; |
133 | 120 |
|
| 121 | + const noMigrations = computed(() => { |
| 122 | + return migrationList.value.length === 0; |
| 123 | + }); |
| 124 | +
|
| 125 | + const hasMissingMigrations = computed(() => { |
| 126 | + return migrationList.value.filter(m => !m.ran); |
| 127 | + }); |
| 128 | +
|
134 | 129 | return { |
135 | 130 | t, |
136 | 131 | addMigrationToDatabase, |
137 | 132 | migrate, |
138 | 133 | updateMigrationState, |
139 | 134 | rollback, |
140 | | - migrationState, |
| 135 | + migrationList, |
141 | 136 | migrationLoaded, |
| 137 | + noMigrations, |
| 138 | + hasMissingMigrations, |
142 | 139 | }; |
143 | 140 | } |
144 | 141 | }; |
|
0 commit comments