56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<template>
|
|
<b-tab :title="$gettext('Station Permissions')">
|
|
<permissions-form-station-row
|
|
v-for="(row, index) in form.permissions.$model.station" :key="index"
|
|
:stations="stations" :station-permissions="stationPermissions"
|
|
v-model:row="form.permissions.$model.station[index]" @remove="remove(index)"
|
|
></permissions-form-station-row>
|
|
|
|
<b-button-group v-if="hasRemainingStations">
|
|
<b-dropdown size="sm" variant="outline-primary">
|
|
<template #button-content>
|
|
{{ $gettext('Add Station') }}
|
|
</template>
|
|
<div style="max-height: 300px; overflow-y: auto;">
|
|
<b-dropdown-item-button v-for="(stationName, stationId) in remainingStations" :key="stationId"
|
|
@click="add(stationId)">{{ stationName }}
|
|
</b-dropdown-item-button>
|
|
</div>
|
|
</b-dropdown>
|
|
</b-button-group>
|
|
</b-tab>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {find, isEmpty, pickBy} from 'lodash';
|
|
import PermissionsFormStationRow from "~/components/Admin/Permissions/Form/StationRow.vue";
|
|
import {computed} from "vue";
|
|
|
|
const props = defineProps({
|
|
form: Object,
|
|
stations: Object,
|
|
stationPermissions: Object
|
|
});
|
|
|
|
const remainingStations = computed(() => {
|
|
return pickBy(props.stations, (stationName, stationId) => {
|
|
return !find(props.form.permissions.$model.station, {'station_id': stationId});
|
|
});
|
|
});
|
|
|
|
const hasRemainingStations = computed(() => {
|
|
return !isEmpty(remainingStations.value);
|
|
});
|
|
|
|
const remove = (index) => {
|
|
props.form.permissions.$model.station.splice(index, 1);
|
|
};
|
|
|
|
const add = (stationId) => {
|
|
props.form.permissions.$model.station.push({
|
|
'station_id': stationId,
|
|
'permissions': []
|
|
});
|
|
};
|
|
</script>
|