libresign/src/views/FilesList/FileEntry/FileEntryStatus.vue at 16eff36126a5536409a45a8ec327f7cca258e237 · LibreSign/libresign · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!--
  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div v-if="statusText !== 'none'"
		class="status-chip"
		:class="'status-chip--' + statusToVariant(status)"
		:title="statusText">
		<div class="status-chip__text">{{ statusText }}</div>
	</div>
</template>

<script>
export default {
	name: 'FileEntryStatus',
	props: {
		statusText: {
			type: String,
			required: true,
			default: 'none',
		},
		status: {
			type: Number,
			required: true,
			default: 0,
		},
		signers: {
			type: Array,
			default: () => [],
		},
	},
	methods: {
		statusToVariant(status) {
			const statusMap = {
				'-1': 'not-libresign',
				'0': 'draft',
				'1': 'available',
				'2': 'partial',
				'3': 'signed',
				'4': 'deleted',
				'5': 'signing',
			}
			return statusMap[String(status)] || 'draft'
		},
	},
}
</script>

<style lang="scss" scoped>
.status-chip {
	--chip-size: 24px;
	--chip-radius: 12px;

	display: inline-flex;
	align-items: center;
	min-height: var(--chip-size);
	max-width: 100%;
	padding: 4px 10px;
	border-radius: var(--chip-radius);
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;

	&__text {
		display: inline-block;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&--error {
		background-color: var(--color-error);
		color: var(--color-error-text);
	}

	&--not-libresign {
		background-color: var(--color-error);
		color: var(--color-error-text);
	}

	&--draft {
		background-color: #E0E0E0;
		color: #424242;
	}

	&--available {
		background-color: #FFF3CD;
		color: #856404;
	}

	&--partial {
		background-color: #FFF3CD;
		color: #856404;
	}

	&--signed {
		background-color: #D4EDDA;
		color: #155724;
	}

	&--signing {
		background-color: #FFE5CC;
		color: #FF9500;
	}

	&--deleted {
		background-color: #D3D3D3;
		color: #666666;
	}

}
</style>