Add Dal Alterations modal
This commit is contained in:
Jože Fortun
Tomaž Jerman
parent
f5c11dbe22
commit
bf32ffa490
@ -1,112 +1,143 @@
|
||||
<template>
|
||||
<b-modal
|
||||
v-model="showModal"
|
||||
:title="alterationModalTitle"
|
||||
size="lg"
|
||||
title="Schema alterations"
|
||||
size="xl"
|
||||
body-class="p-0 border-top-0"
|
||||
header-class="p-3 pb-0 border-bottom-0"
|
||||
@change="$emit('change', $event)"
|
||||
>
|
||||
<b-table-simple hover small caption-top responsive class="px-3">
|
||||
<b-table-simple
|
||||
borderless
|
||||
sticky-header
|
||||
responsive
|
||||
head-variant="light"
|
||||
style="max-height: 75vh;"
|
||||
>
|
||||
<b-thead>
|
||||
<b-tr>
|
||||
<b-th>Operation</b-th>
|
||||
<b-th>Change</b-th>
|
||||
<b-th></b-th>
|
||||
<b-th
|
||||
class="text-primary"
|
||||
>
|
||||
Operation
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="text-primary"
|
||||
>
|
||||
Change
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="text-primary text-center"
|
||||
>
|
||||
Status
|
||||
</b-th>
|
||||
<b-th style="min-width: 200px;" />
|
||||
</b-tr>
|
||||
</b-thead>
|
||||
|
||||
<b-tbody>
|
||||
<template
|
||||
v-for="batch in alterationsBatched"
|
||||
>
|
||||
<b-tr
|
||||
v-for="a in batch"
|
||||
v-for="a in sortedAlterations"
|
||||
:key="a.alterationID"
|
||||
class="border-top"
|
||||
:class="{ 'bg-gray': a.alterationID === dependOnHover }"
|
||||
@mouseover="dependOnHover = a.dependsOn"
|
||||
@mouseleave="dependOnHover = undefined"
|
||||
>
|
||||
<b-td>
|
||||
{{ a.alterationID }}
|
||||
{{ a.kind }}
|
||||
|
||||
<template v-if="a.error">
|
||||
<br />
|
||||
<b-badge variant="danger">
|
||||
{{ a.error || '' }}
|
||||
</b-badge>
|
||||
</template>
|
||||
</b-td>
|
||||
|
||||
<b-td>
|
||||
<pre class="m-0">{{ a.params }}</pre>
|
||||
</b-td>
|
||||
|
||||
<b-td>
|
||||
<c-input-confirm
|
||||
v-if="canComplete(a)"
|
||||
class="ml-1"
|
||||
@click.stop
|
||||
@confirmed="onComplete(a)"
|
||||
<b-td class="text-center align-top">
|
||||
<b-badge
|
||||
v-if="a.error"
|
||||
variant="danger"
|
||||
>
|
||||
Complete
|
||||
</c-input-confirm>
|
||||
{{ a.error || '' }}
|
||||
</b-badge>
|
||||
|
||||
<b-badge
|
||||
v-else-if="a.completedAt"
|
||||
variant="success"
|
||||
>
|
||||
Resolved
|
||||
</b-badge>
|
||||
|
||||
<b-badge
|
||||
v-else-if="a.dependsOn"
|
||||
variant="secondary"
|
||||
>
|
||||
Waiting for {{ a.dependsOn }}
|
||||
</b-badge>
|
||||
</b-td>
|
||||
|
||||
<b-td class="text-right">
|
||||
<b-spinner
|
||||
v-if="a.processing"
|
||||
variant="primary"
|
||||
small
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<c-input-confirm
|
||||
v-if="canDismiss(a)"
|
||||
class="ml-1"
|
||||
v-if="!a.completedAt"
|
||||
:disabled="!canResolve(a) || a.processing || processing"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
class="mx-1"
|
||||
@click.stop
|
||||
@confirmed="onResolve(a)"
|
||||
>
|
||||
Resolve
|
||||
</c-input-confirm>
|
||||
|
||||
<c-input-confirm
|
||||
v-if="!a.completedAt"
|
||||
:disabled="!canDismiss(a) || a.processing || processing"
|
||||
variant="light"
|
||||
size="sm"
|
||||
class="mx-1"
|
||||
@click.stop
|
||||
@confirmed="onDismiss(a)"
|
||||
>
|
||||
Dismiss
|
||||
</c-input-confirm>
|
||||
<b-badge
|
||||
v-else-if="!canDismiss(a) && !a.completedAt && a.dependsOn"
|
||||
variant="secondary"
|
||||
>
|
||||
Waiting for {{ a.dependsOn }}
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-else-if="a.completedAt"
|
||||
variant="success"
|
||||
>
|
||||
Completed
|
||||
</b-badge>
|
||||
</template>
|
||||
</b-td>
|
||||
</b-tr>
|
||||
|
||||
</template>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
|
||||
<b-container
|
||||
slot="modal-footer"
|
||||
>
|
||||
<b-row
|
||||
no-gutters
|
||||
class="align-items-center"
|
||||
>
|
||||
<b-col
|
||||
class="d-flex justify-content-start"
|
||||
>
|
||||
<template #modal-footer>
|
||||
<b-button
|
||||
variant="light"
|
||||
data-test-id="button-save"
|
||||
variant="link"
|
||||
size="sm"
|
||||
@click="$emit('save')"
|
||||
:disabled="processing"
|
||||
@click="$emit('cancel')"
|
||||
>
|
||||
Close
|
||||
Cancel
|
||||
</b-button>
|
||||
</b-col>
|
||||
<b-col
|
||||
class="d-flex justify-content-end"
|
||||
>
|
||||
|
||||
<c-input-confirm
|
||||
class="mr-1"
|
||||
variant="primary"
|
||||
:disabled="processing"
|
||||
:borderless="false"
|
||||
@confirmed="onComplete()"
|
||||
@confirmed="onResolve()"
|
||||
>
|
||||
Complete automatically
|
||||
Resolve automatically
|
||||
<b-spinner
|
||||
v-if="processing"
|
||||
variant="white"
|
||||
small
|
||||
/>
|
||||
</c-input-confirm>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</template>
|
||||
</b-modal>
|
||||
</template>
|
||||
<script>
|
||||
@ -133,10 +164,16 @@ export default {
|
||||
return {
|
||||
showModal: false,
|
||||
|
||||
alterations: [{
|
||||
processing: false,
|
||||
|
||||
dependOnHover: undefined,
|
||||
|
||||
alterations: [
|
||||
{
|
||||
alterationID: '338079440671000001',
|
||||
batchID: '338079440672000001',
|
||||
dependsOn: undefined,
|
||||
processing: false,
|
||||
kind: 'a',
|
||||
params: {},
|
||||
error: undefined,
|
||||
@ -164,7 +201,6 @@ export default {
|
||||
completedAt: '2023-05-22T08:39:35.341Z',
|
||||
completedBy: '338079375675130271',
|
||||
},
|
||||
|
||||
{
|
||||
alterationID: '338079440671000003',
|
||||
batchID: '338079440672000003',
|
||||
@ -180,7 +216,8 @@ export default {
|
||||
deletedBy: undefined,
|
||||
completedAt: undefined,
|
||||
completedBy: undefined,
|
||||
}, {
|
||||
},
|
||||
{
|
||||
alterationID: '338079440671000004',
|
||||
batchID: '338079440672000003',
|
||||
dependsOn: '338079440671000003',
|
||||
@ -196,14 +233,13 @@ export default {
|
||||
completedAt: undefined,
|
||||
completedBy: undefined,
|
||||
},
|
||||
|
||||
{
|
||||
alterationID: '338079440671000005',
|
||||
batchID: '338079440672000005',
|
||||
dependsOn: undefined,
|
||||
kind: 'b',
|
||||
params: {},
|
||||
error: 'Something went wrong :)',
|
||||
error: 'Something went wrong',
|
||||
createdAt: '2023-05-22T08:39:35.341Z',
|
||||
createdBy: '338079375675130271',
|
||||
updatedAt: undefined,
|
||||
@ -212,31 +248,14 @@ export default {
|
||||
deletedBy: undefined,
|
||||
completedAt: undefined,
|
||||
completedBy: undefined,
|
||||
}],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
alterationModalTitle () {
|
||||
const { handle } = this.module
|
||||
return handle ? this.$t('edit.alterationSettings.specificTitle', { handle }) : this.$t('edit.alterationSettings.title')
|
||||
},
|
||||
|
||||
alterationsBatched () {
|
||||
let out = []
|
||||
let batchIndex = {}
|
||||
|
||||
for (const a of this.alterations || []) {
|
||||
if (batchIndex[a.batchID]) {
|
||||
out[batchIndex[a.batchID]].push(a)
|
||||
continue
|
||||
}
|
||||
|
||||
batchIndex[a.batchID] = out.length
|
||||
out.push([a])
|
||||
}
|
||||
|
||||
return out
|
||||
sortedAlterations () {
|
||||
return this.alterations.toSorted((a, b) => (a.batchID || '').localeCompare(b.batchID || '') || (a.dependsOn || '').localeCompare(b.dependsOn || ''))
|
||||
},
|
||||
},
|
||||
|
||||
@ -251,27 +270,29 @@ export default {
|
||||
|
||||
methods: {
|
||||
async onDismiss (alteration = undefined) {
|
||||
if (!alteration) {
|
||||
alteration = this.alterations
|
||||
.filter(a => !a.completedAt)
|
||||
.map(a => a.alterationID)
|
||||
}
|
||||
this.processing = true
|
||||
this.$set(alteration, 'processing', true)
|
||||
|
||||
// @todo here, we'll be pinging an API which will take a little bit to process
|
||||
await this.delay(1000)
|
||||
console.log('done on dismiss')
|
||||
this.$ComposeAPI.dismissAlteration(alteration).then(() => {
|
||||
this.toastSuccess(this.$t('notification:module.alteration.dismiss.success'))
|
||||
}).catch(this.toastErrorHandler(this.$t('notification:alteration.dismiss.error')))
|
||||
.finally(() => {
|
||||
this.processing = false
|
||||
this.$set(alteration, 'processing', false)
|
||||
})
|
||||
},
|
||||
|
||||
async onComplete (alteration = undefined) {
|
||||
if (!alteration) {
|
||||
alteration = this.alterations
|
||||
.filter(a => !a.completedAt)
|
||||
.map(a => a.alterationID)
|
||||
}
|
||||
async onResolve (alteration = undefined) {
|
||||
this.processing = true
|
||||
this.$set(alteration, 'processing', true)
|
||||
|
||||
// @todo here, we'll be pinging an API which will take a little bit to process
|
||||
await this.delay(1000)
|
||||
console.log('done on complete')
|
||||
this.$ComposeAPI.resolveAlteration(alteration).then(() => {
|
||||
this.toastSuccess(this.$t('notification:module.alteration.resolve.success'))
|
||||
}).catch(this.toastErrorHandler(this.$t('notification:alteration.resolve.error')))
|
||||
.finally(() => {
|
||||
this.processing = false
|
||||
this.$set(alteration, 'processing', false)
|
||||
})
|
||||
},
|
||||
|
||||
canDismiss (alteration) {
|
||||
@ -280,22 +301,15 @@ export default {
|
||||
}
|
||||
|
||||
if (alteration.dependsOn) {
|
||||
const dep = this.alterations.find(a => a.alterationID === alteration.dependsOn)
|
||||
if (dep && !dep.completedAt) {
|
||||
return false
|
||||
}
|
||||
return this.alterations.some(a => a.alterationID === alteration.dependsOn && !a.completedAt)
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
canComplete (alteration) {
|
||||
canResolve (alteration) {
|
||||
return this.canDismiss(alteration)
|
||||
},
|
||||
|
||||
delay (t, val) {
|
||||
return new Promise(resolve => setTimeout(resolve, t, val));
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -424,7 +424,7 @@
|
||||
<dal-schema-alterations
|
||||
:modal="dalSchemaAlterations.modal"
|
||||
:module="module"
|
||||
@change="dalSchemaAlterations.modal = ($event || false)"
|
||||
@cancel="dalSchemaAlterations.modal = ($event || false)"
|
||||
/>
|
||||
|
||||
<federation-settings
|
||||
@ -545,6 +545,10 @@ export default {
|
||||
modal: true,
|
||||
},
|
||||
|
||||
dalSchemaAlterations: {
|
||||
modal: true,
|
||||
},
|
||||
|
||||
discoverySettings: {
|
||||
modal: false,
|
||||
},
|
||||
@ -666,7 +670,7 @@ export default {
|
||||
watch: {
|
||||
moduleID: {
|
||||
immediate: true,
|
||||
handler (moduleID) {
|
||||
async handler (moduleID) {
|
||||
this.module = undefined
|
||||
this.initialModuleState = undefined
|
||||
|
||||
@ -690,7 +694,7 @@ export default {
|
||||
moduleID: moduleID,
|
||||
}
|
||||
|
||||
this.findModuleByID(params).then((module) => {
|
||||
await this.findModuleByID(params).then((module) => {
|
||||
// Make a copy so that we do not change store item by ref
|
||||
this.module = module.clone()
|
||||
this.initialModuleState = module.clone()
|
||||
@ -715,6 +719,11 @@ export default {
|
||||
}
|
||||
|
||||
this.fetchSensitivityLevels()
|
||||
|
||||
// Check if module has Alterations to resolve
|
||||
if (this.module.issues.some(({ meta = {} }) => meta.batchID)) {
|
||||
this.dalSchemaAlterations.modal = true
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user