<script setup> /* Lesli Copyright (c) 2023, Lesli Technologies, S. A. This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/. Lesli · Ruby on Rails SaaS Development Framework. Made with ♥ by https://www.lesli.tech Building a better future, one line of code at a time. @contact hello@lesli.tech @website https://www.lesli.tech @license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html // · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ // · */ // · import vue tools import { ref, reactive, onMounted, watch, computed, inject } from "vue" import { useRouter, useRoute } from "vue-router" // · import lesli stores import { useRole } from "LesliGuard/stores/role" // · initialize/inject plugins const router = useRouter() const route = useRoute() const msg = inject("msg") const url = inject("url") const olpSelected = ref(0) // · const storeRole = useRole() // · defining props const props = defineProps({ editable: { type: Boolean, required: false, default: false } }) // · const translations = { lesli: { shared: i18n.t("lesli.shared") }, core: { shared: I18n.t('core.shared'), roles: I18n.t('core.roles') } } // · function submitRole() { // role id exists, then just update the role if (storeRole.role.id) { return storeRole.putRole() } return storeRole.postRole() } // · function selectObjectLevelPermission(olpSelectedInForm) { olpSelected.value = olpSelectedInForm storeRole.role.object_level_permission = olpSelectedInForm } // · onMounted(() => { if (route.params.id) { storeRole.getRole(route.params.id) } else { storeRole.$reset() } storeRole.getOptions() }) </script> <template> <lesli-form :editable="props.editable" @submit="submitRole"> <!-- Role name --> <div class="field"> <label class="label"> Name <sup class="has-text-danger">*</sup> </label> <div class="control"> <input v-model="storeRole.role.name" class="input" type="text" required /> </div> </div> <!-- Role Description --> <div class="field"> <label class="label"> Description </label> <div class="control"> <input v-model="storeRole.role.description" class="input" type="text" /> </div> </div> <!-- Role default path --> <div class="field"> <label class="label">Default path</label> <div class="control"> <input v-model="storeRole.role.path_default" class="input" type="text" :placeholder="translations.core.roles.view_placeholder_default_path_at_login"> </div> <p class="help">Default path to redirect after login.</p> </div> <hr /> <div class="columns"> <div class="column"> <!-- Role limited to path --> <div class="field"> <label class="label"> Limited? </label> <div class="control"> <div class="select"> <lesli-select v-model="storeRole.role.path_limited" :options="[{ label: translations.core.roles.view_text_limit_to_path, value: true }, { label: translations.core.roles.view_text_allow_all_paths, value: false }]"> </lesli-select> </div> </div> <p class="help">Always redirect role to the default path</p> </div> </div> <div class="column"> <!-- Role is isolated --> <div class="field"> <label class="label"> Isolated? <sup class="has-text-danger">*</sup> </label> <div class="control"> <div class="select"> <lesli-select v-model="storeRole.role.isolated" :options="[{ label: translations.core.roles.view_text_restrict_data_access, value: true }, { label: translations.core.roles.view_text_allow_to_see_all_the_data, value: false }]"> </lesli-select> </div> </div> <p class="help">Force the role to query only the data that belongs to the current user</p> </div> </div> <div class="column"> <!-- Enable/disable role --> <div class="field"> <label class="label"> Status <sup class="has-text-danger">*</sup> </label> <div class="control"> <div class="select"> <lesli-select v-model="storeRole.role.active" :options="[{ label: translations.core.roles.view_text_active, value: true },{ label: translations.core.roles.view_text_disabled, value: false }]"> </lesli-select> </div> </div> <p class="help">Activate/deactivate role</p> </div> </div> </div> <!-- Object level permission --> <div class="field"> <label class="label"> Hierarchical level <sup class="has-text-danger">*</sup> </label> <ul class="hierarchical_level_selector"> <li :class="['hover', 'p-1', { 'has-background-info has-text-light' : olpSelected == olp.level }]" v-for="(olp, index) in storeRole.options.object_level_permissions" :key="index" @click="selectObjectLevelPermission(olp.level)"> <p class="icon-text"> <span class="icon"> <span class="material-icons"> {{ olpSelected == olp.level ? 'check_box' : 'check_box_outline_blank' }} </span> <i :class="['fas', olpSelected == olp.level ? 'fa-check' : 'fa-chevron-right']"></i> </span> <span> {{ `${translations.core.roles.view_text_level || 'Level' } ${ index + 1 }` }} <i v-if="olp.roles.length">- {{ olp.roles.map(role => role.name).join(', ') }}</i> </span> </p> </li> </ul> </div> <hr> <div class="field is-grouped" v-if="props.editable"> <div class="control"> <lesli-button main icon="save" :loading="storeRole.role.loading"> {{ translations.lesli.shared.button_save }} </lesli-button> </div> </div> </lesli-form> </template>