75 lines
2.9 KiB
Vue
75 lines
2.9 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useEmployeeStore } from 'src/stores/employee-store';
|
|
import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
|
|
|
|
const employee_store = useEmployeeStore();
|
|
const employee_list_api = useEmployeeListApi();
|
|
|
|
const { presetId } = defineProps<{
|
|
presetId: number;
|
|
}>();
|
|
|
|
const employee_amount_using_preset = ref(0);
|
|
const delete_input_string = ref('');
|
|
const is_approve_deletion = computed(() => ['SUPPRIMER', 'DELETE'].includes(delete_input_string.value));
|
|
|
|
onMounted(() => {
|
|
const employees_with_preset = employee_store.employee_list.filter(employee => employee.preset_id === presetId);
|
|
employee_amount_using_preset.value = employees_with_preset.length;
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="column flex-center bg-secondary q-pa-md rounded-10 shadow-24"
|
|
style="border: 2px solid var(--q-negative); width: 40vw !important;"
|
|
>
|
|
<span class="col-auto text-weight-bold text-uppercase text-center text-negative text-h5 q-pb-lg">
|
|
{{ $t('shared.label.remove') }}
|
|
</span>
|
|
|
|
<div
|
|
v-if="employee_amount_using_preset > 0"
|
|
class="col row flex-center text-weight-medium text-center q-mb-lg"
|
|
>
|
|
<span class="col-auto">{{ $t('employee_management.schedule_presets.delete_warning_employee_1') }}</span>
|
|
<span class="col-auto q-px-sm text-h6 text-weight-bolder text-negative">{{ employee_amount_using_preset
|
|
}}</span>
|
|
<span class="col-auto">{{ $t('employee_management.module_access.preset_employee') +
|
|
(employee_amount_using_preset > 1 ? 's' : '') }}</span>
|
|
<span>{{ $t('employee_management.schedule_presets.delete_warning_employee_2') }}</span>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<span class="text-weight-bold text-uppercase">{{ $t('employee_management.schedule_presets.delete_warning')
|
|
}}</span>
|
|
<q-input
|
|
v-model="delete_input_string"
|
|
standout
|
|
dense
|
|
rounded
|
|
:placeholder="$t('employee_management.enter_delete_input')"
|
|
input-class="text-center"
|
|
:input-style="delete_input_string.length > 0 ? '' : 'opacity: 0.6;'"
|
|
class="q-my-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-auto row">
|
|
<q-space />
|
|
<q-btn
|
|
push
|
|
dense
|
|
:disable="!is_approve_deletion"
|
|
:color="is_approve_deletion ? 'negative' : 'grey-6'"
|
|
:label="$t('shared.label.remove')"
|
|
class="q-px-md"
|
|
@click="employee_list_api.deleteSchedulePreset(presetId)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template> |