1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-21 12:29:03 +01:00

(feat) add accordion for calendar filter

This commit is contained in:
Du Peng 2022-12-22 15:18:28 +01:00
parent bcd76ee6d5
commit 774ce35fa8
7 changed files with 58 additions and 18 deletions

View File

@ -23,21 +23,21 @@ export const DeleteMachineCategoryModal: React.FC<DeleteMachineCategoryModalProp
const handleDeleteMachineCategory = async (): Promise<void> => {
try {
await MachineCategoryAPI.destroy(machineCategoryId);
onSuccess(t('app.admin.machines.delete_machine_category_modal.deleted'));
onSuccess(t('app.admin.delete_machine_category_modal.deleted'));
} catch (e) {
onError(t('app.admin.machines.delete_machine_category_modal.unable_to_delete') + e);
onError(t('app.admin.delete_machine_category_modal.unable_to_delete') + e);
}
};
return (
<FabModal title={t('app.admin.machines.delete_machine_category_modal.confirmation_required')}
<FabModal title={t('app.admin.delete_machine_category_modal.confirmation_required')}
isOpen={isOpen}
toggleModal={toggleModal}
closeButton={true}
confirmButton={t('app.admin.machines.delete_machine_category_modal.confirm')}
confirmButton={t('app.admin.delete_machine_category_modal.confirm')}
onConfirm={handleDeleteMachineCategory}
className="delete-machine-category-modal">
<p>{t('app.admin.machines.delete_machine_category_modal.confirm_machine_category')}</p>
<p>{t('app.admin.delete_machine_category_modal.confirm_machine_category')}</p>
</FabModal>
);
};

View File

@ -451,6 +451,14 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
$scope.hasMachineCategory = _.some(machines, 'machine_category_id');
$scope.spaces = spaces;
$scope.filter = filter;
$scope.accordion = {
trainings: false,
machines: false,
spaces: false
};
$scope.machinesGroupByCategory.forEach(c => $scope.accordion[c.name] = false);
$scope.toggleAccordion = (type) => $scope.accordion[type] = !$scope.accordion[type];
$scope.toggleFilter = (type, filter, machineCategoryId) => toggleFilter(type, filter, machineCategoryId);

View File

@ -167,6 +167,14 @@ Application.Controllers.controller('CalendarController', ['$scope', '$state', '$
$scope.spaces = spaces;
$scope.externals = externals;
$scope.filter = filter;
$scope.accordion = {
trainings: false,
machines: false,
spaces: false
};
$scope.machinesGroupByCategory.forEach(c => $scope.accordion[c.name] = false);
$scope.toggleAccordion = (type) => $scope.accordion[type] = !$scope.accordion[type];
$scope.toggleFilter = (type, filter, machineCategoryId) => toggleFilter(type, filter, machineCategoryId);

View File

@ -1,30 +1,39 @@
<div class="m-b row">
<div class="row">
<h3 class="col-md-11 col-sm-11 col-xs-11 text-black" translate>{{ 'app.shared.calendar.show_unavailables' }}</h3>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.dispo" ng-change="filterAvailabilities(filter)">
</div>
<div>
<div class="m-t" ng-show="$root.modules.trainings">
<div class="row">
<h3 class="col-md-11 col-sm-11 col-xs-11 text-purple" translate>{{ 'app.shared.calendar.trainings' }}</h3>
<h3 class="col-md-11 col-sm-11 col-xs-11">
<i ng-class="{'fa-chevron-up': !accordion.trainings, 'fa-chevron-down': accordion.trainings}" ng-click="toggleAccordion('trainings')" class="fa m-r-xs text-black"></i>
<span class="text-purple" translate>{{ 'app.shared.calendar.trainings' }}</span>
</h3>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.trainings" ng-change="toggleFilter('trainings', filter)">
</div>
<div ng-repeat="t in trainings" class="row">
<div ng-repeat="t in trainings" class="row" ng-hide="accordion.trainings">
<span class="col-md-11 col-sm-11 col-xs-11">{{::t.name}}</span>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="t.checked" ng-change="filterAvailabilities(filter)">
</div>
</div>
<div class="m-t">
<div class="m-t" ng-show="$root.modules.machines">
<div class="row">
<h3 class="col-md-11 col-sm-11 col-xs-11 text-beige" translate>{{ 'app.shared.calendar.machines' }}</h3>
<h3 class="col-md-11 col-sm-11 col-xs-11">
<i ng-class="{'fa-chevron-up': !accordion.machines, 'fa-chevron-down': accordion.machines}" ng-click="toggleAccordion('machines')" class="fa m-r-xs text-black"></i>
<span class="text-beige" translate>{{ 'app.shared.calendar.machines' }}</span>
</h3>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.machines" ng-change="toggleFilter('machines', filter)">
</div>
<div ng-if="!hasMachineCategory" ng-repeat="m in machines" class="row">
<div ng-if="!hasMachineCategory" ng-repeat="m in machines" class="row" ng-hide="accordion.machines">
<span class="col-md-11 col-sm-11 col-xs-11">{{::m.name}}</span>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="m.checked" ng-change="filterAvailabilities(filter)">
</div>
<div ng-if="hasMachineCategory" ng-repeat="category in machinesGroupByCategory" class="row">
<span class="col-md-11 col-sm-11 col-xs-11">{{::category.name}}</span>
<div ng-if="hasMachineCategory" ng-repeat="category in machinesGroupByCategory" class="row" ng-hide="accordion.machines">
<span class="col-md-11 col-sm-11 col-xs-11">
<i ng-class="{'fa-chevron-up': !accordion[category.name], 'fa-chevron-down': accordion[category.name]}" ng-click="toggleAccordion(category.name)" class="fa m-r-xs text-black"></i>
{{::category.name}}
</span>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="category.checked" ng-change="toggleFilter('machineCategory', filter, category.id)">
<div ng-repeat="m in category.machines" class="col-md-12">
<div ng-repeat="m in category.machines" class="col-md-12" ng-hide="accordion[category.name]">
<div class="row p-l-sm">
<span class="col-md-11 col-sm-11 col-xs-11">{{::m.name}}</span>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="m.checked" ng-change="filterAvailabilities(filter)">
@ -34,10 +43,13 @@
</div>
<div class="m-t" ng-show="$root.modules.spaces">
<div class="row">
<h3 class="col-md-11 col-sm-11 col-xs-11 text-cyan" translate>{{ 'app.shared.calendar.spaces' }}</h3>
<h3 class="col-md-11 col-sm-11 col-xs-11">
<i ng-class="{'fa-chevron-up': !accordion.spaces, 'fa-chevron-down': accordion.spaces}" ng-click="toggleAccordion('spaces')" class="fa m-r-xs text-black"></i>
<span class="text-cyan" translate>{{ 'app.shared.calendar.spaces' }}</span>
</h3>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="filter.spaces" ng-change="toggleFilter('spaces', filter)">
</div>
<div ng-repeat="s in spaces" class="row">
<div ng-repeat="s in spaces" class="row" ng-hide="accordion.spaces">
<span class="col-md-11 col-sm-11 col-xs-11">{{::s.name}}</span>
<input class="col-md-1 col-sm-1 col-xs-1" type="checkbox" ng-model="s.checked" ng-change="filterAvailabilities(filter)">
</div>

View File

@ -1,7 +1,7 @@
<div class="widget">
<div class="modal-header">
<button type="button" class="close" ng-click="close($event)"><span>&times;</span></button>
<h1 class="modal-title" translate>{{ 'app.public.calendar.filter_calendar' }}</h1>
<h1 class="modal-title" translate>{{ 'app.shared.calendar.filter_calendar' }}</h1>
</div>
<div class="modal-body widget-content calendar-filter calendar-filter-aside">
<ng-include src="'/calendar/filter.html'"></ng-include>

View File

@ -22,6 +22,12 @@ en:
name: "Name of category"
assigning_machines: "Assigning the machines to this category"
save: "Save"
delete_machine_category_modal:
confirmation_required: "Confirmation required"
confirm: "Confirm"
deleted: "The machine category request has been deleted."
unable_to_delete: "Unable to delete the machine category : "
confirm_delete_supporting_documents_type: "Do you really want to remove this machine category ?"
machine_form:
name: "Name"
illustration: "Visual"

View File

@ -22,6 +22,12 @@ fr:
name: "Nom de la catégorie"
assigning_machines: "Assigner les machines à cette catégorie"
save: "Enregistrer"
delete_machine_category_modal:
confirmation_required: "Confirmation requise"
confirm: "Valider"
deleted: "La catégorie machine a bien été supprimée."
unable_to_delete: "Impossible de supprimer la catégorie machine : "
confirm_machine_category: "Êtes-vous sûr de vouloir supprimer la catégorie machine ?"
machine_form:
name: "Nom"
illustration: "Illustration"