|
| 1 | +<template> |
| 2 | + <Teleport to="body"> |
| 3 | + <div v-if="show" class="modal-backdrop"> |
| 4 | + <div class="bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4"> |
| 5 | + <div class="px-6 py-4 border-b border-gray-700"> |
| 6 | + <h3 class="text-lg font-medium text-white">Assigning VMs</h3> |
| 7 | + </div> |
| 8 | + |
| 9 | + <div class="p-6"> |
| 10 | + <!-- Progress Overview --> |
| 11 | + <div class="mb-6"> |
| 12 | + <div class="flex justify-between items-center mb-2"> |
| 13 | + <span class="text-sm text-gray-300">Progress</span> |
| 14 | + <span class="text-sm text-gray-400">{{ completed }} of {{ total }}</span> |
| 15 | + </div> |
| 16 | + <div class="w-full bg-gray-700 rounded-full h-2"> |
| 17 | + <div |
| 18 | + class="bg-blue-600 h-2 rounded-full transition-all duration-300 ease-out" |
| 19 | + :style="{ width: `${progressPercentage}%` }" |
| 20 | + ></div> |
| 21 | + </div> |
| 22 | + </div> |
| 23 | + |
| 24 | + <!-- Current Status --> |
| 25 | + <div class="mb-4"> |
| 26 | + <div class="flex items-center mb-2"> |
| 27 | + <div v-if="isLoading" class="spinner w-4 h-4 mr-2"></div> |
| 28 | + <span class="text-sm text-gray-300">{{ currentStatus }}</span> |
| 29 | + </div> |
| 30 | + <div v-if="currentTeam" class="text-xs text-gray-400"> |
| 31 | + Assigning to: {{ currentTeam }} |
| 32 | + </div> |
| 33 | + </div> |
| 34 | + |
| 35 | + <!-- Success/Error Messages --> |
| 36 | + <div v-if="successMessage" class="mb-4 p-3 bg-green-900 border border-green-700 rounded-lg"> |
| 37 | + <div class="flex items-center"> |
| 38 | + <svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 39 | + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
| 40 | + </svg> |
| 41 | + <span class="text-green-400 text-sm">{{ successMessage }}</span> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + |
| 45 | + <div v-if="errorMessage" class="mb-4 p-3 bg-red-900 border border-red-700 rounded-lg"> |
| 46 | + <div class="flex items-center"> |
| 47 | + <svg class="w-5 h-5 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 48 | + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
| 49 | + </svg> |
| 50 | + <span class="text-red-400 text-sm">{{ errorMessage }}</span> |
| 51 | + </div> |
| 52 | + </div> |
| 53 | + |
| 54 | + <!-- Action Buttons --> |
| 55 | + <div class="flex justify-end space-x-3"> |
| 56 | + <button |
| 57 | + v-if="!isLoading && (successMessage || errorMessage)" |
| 58 | + @click="$emit('close')" |
| 59 | + class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-colors duration-200" |
| 60 | + > |
| 61 | + Close |
| 62 | + </button> |
| 63 | + <button |
| 64 | + v-if="isLoading" |
| 65 | + @click="$emit('cancel')" |
| 66 | + class="px-4 py-2 text-sm font-medium text-gray-300 bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-colors duration-200" |
| 67 | + > |
| 68 | + Cancel |
| 69 | + </button> |
| 70 | + </div> |
| 71 | + </div> |
| 72 | + </div> |
| 73 | + </div> |
| 74 | + </Teleport> |
| 75 | +</template> |
| 76 | + |
| 77 | +<script> |
| 78 | +export default { |
| 79 | + name: 'AssignmentProgressModal', |
| 80 | + props: { |
| 81 | + show: { |
| 82 | + type: Boolean, |
| 83 | + default: false |
| 84 | + }, |
| 85 | + isLoading: { |
| 86 | + type: Boolean, |
| 87 | + default: false |
| 88 | + }, |
| 89 | + completed: { |
| 90 | + type: Number, |
| 91 | + default: 0 |
| 92 | + }, |
| 93 | + total: { |
| 94 | + type: Number, |
| 95 | + default: 0 |
| 96 | + }, |
| 97 | + currentStatus: { |
| 98 | + type: String, |
| 99 | + default: '' |
| 100 | + }, |
| 101 | + currentTeam: { |
| 102 | + type: String, |
| 103 | + default: '' |
| 104 | + }, |
| 105 | + successMessage: { |
| 106 | + type: String, |
| 107 | + default: '' |
| 108 | + }, |
| 109 | + errorMessage: { |
| 110 | + type: String, |
| 111 | + default: '' |
| 112 | + } |
| 113 | + }, |
| 114 | + emits: ['close', 'cancel'], |
| 115 | + computed: { |
| 116 | + progressPercentage() { |
| 117 | + if (this.total === 0) return 0 |
| 118 | + return Math.round((this.completed / this.total) * 100) |
| 119 | + } |
| 120 | + } |
| 121 | +} |
| 122 | +</script> |
0 commit comments