122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<template>
|
|
<button
|
|
class="flex w-full flex-row items-center justify-between rounded-lg border border-gray-100 px-4 py-2 shadow focus:outline-none"
|
|
:class="[
|
|
selected || uninstall ? 'ring-2 ring-inset ring-gray-600' : '',
|
|
selectable ? 'hover:border-gray-300' : 'cursor-default'
|
|
]"
|
|
ref="card"
|
|
>
|
|
<div class="flex flex-row items-center gap-2">
|
|
<input
|
|
v-if="selectable"
|
|
@click.self="$refs['card'].click()"
|
|
:checked="selected"
|
|
type="checkbox"
|
|
class="h-4 w-4 cursor-pointer rounded border-gray-300 text-gray-600 focus:ring-transparent"
|
|
/>
|
|
<h3 class="text-left text-lg font-medium text-gray-900">
|
|
{{ app.title }}
|
|
</h3>
|
|
</div>
|
|
<Badge
|
|
v-if="uninstall"
|
|
class="my-1"
|
|
theme="red"
|
|
label="Will Be Uninstalled "
|
|
/>
|
|
<div v-else class="ml-2 flex flex-row items-center space-x-2">
|
|
<CommitTag
|
|
v-if="deployFrom"
|
|
:tag="deployFrom"
|
|
:link="`${app.repository_url}/commit/${app.current_hash}`"
|
|
/>
|
|
<a
|
|
v-if="deployFrom"
|
|
class="flex cursor-pointer flex-col justify-center"
|
|
:href="`${app.repository_url}/compare/${app.current_hash}...${getHash(
|
|
deployTo.value
|
|
)}`"
|
|
target="_blank"
|
|
>
|
|
<FeatherIcon name="arrow-right" class="w-4" />
|
|
</a>
|
|
<Badge
|
|
v-else
|
|
label="First Deploy"
|
|
theme="green"
|
|
class="whitespace-nowrap"
|
|
/>
|
|
<CommitChooser :options="autocompleteOptions" v-model="deployTo" />
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import CommitChooser from './utils/CommitChooser.vue';
|
|
import CommitTag from './utils/CommitTag.vue';
|
|
export default {
|
|
name: 'AppUpdateCard',
|
|
props: ['app', 'selectable', 'selected', 'uninstall'],
|
|
data() {
|
|
return {
|
|
deployTo: {
|
|
label: this.initialDeployTo(),
|
|
value: this.app.next_release
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
deployTo(newVal) {
|
|
this.app.next_release = newVal.value;
|
|
this.$emit('update:app', this.app);
|
|
}
|
|
},
|
|
computed: {
|
|
deployFrom() {
|
|
if (this.app.will_branch_change) {
|
|
return this.app.current_branch;
|
|
}
|
|
return this.app.current_hash
|
|
? this.app.current_tag || this.app.current_hash.slice(0, 7)
|
|
: null;
|
|
},
|
|
autocompleteOptions() {
|
|
return this.app.releases.map(release => {
|
|
const messageMaxLength = 75;
|
|
let message = release.message.split('\n')[0];
|
|
message =
|
|
message.length > messageMaxLength
|
|
? message.slice(0, messageMaxLength) + '...'
|
|
: message;
|
|
|
|
return {
|
|
label: release.tag
|
|
? release.tag
|
|
: `${message} (${release.hash.slice(0, 7)})`,
|
|
value: release.name
|
|
};
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
initialDeployTo() {
|
|
if (this.uninstall) return '';
|
|
|
|
let next_release = this.app.releases.filter(
|
|
release => release.name === this.app.next_release
|
|
)[0];
|
|
if (this.app.will_branch_change) {
|
|
return this.app.branch;
|
|
} else {
|
|
return next_release.tag || next_release.hash.slice(0, 7);
|
|
}
|
|
},
|
|
getHash(tag) {
|
|
return this.app.releases.find(release => release.name === tag).hash;
|
|
}
|
|
},
|
|
components: { CommitTag, CommitChooser }
|
|
};
|
|
</script>
|