Add custom interface for presets (#4870)

* add custom interface for presets

* add defaults and change naming

* Fix type issue, put current selection on top

* Fetch email as name fallback

* Opinionated code changes

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Nitwel
2021-04-14 00:33:36 +02:00
committed by GitHub
parent c41b5a8179
commit c2bc3ea330
4 changed files with 143 additions and 90 deletions

View File

@@ -160,9 +160,7 @@ export default defineComponent({
const isNew = computed(() => props.id === '+');
const { loading: usersLoading, users } = useUsers();
const { loading: rolesLoading, roles } = useRoles();
const { loading: presetLoading, preset } = usePreset();
const { loading, preset } = usePreset();
const { fields } = useForm();
const {
edits,
@@ -177,8 +175,6 @@ export default defineComponent({
const { save, saving } = useSave();
const { deleting, deleteAndQuit, confirmDelete } = useDelete();
const loading = computed(() => usersLoading.value || presetLoading.value || rolesLoading.value);
return {
backLink,
loading,
@@ -275,8 +271,9 @@ export default defineComponent({
const hasEdits = computed(() => Object.keys(edits.value).length > 0);
const initialValues = computed(() => {
if (isNew.value === true) return {};
if (preset.value === null) return {};
const defaultValues = { scope: 'all', layout: 'tabular' };
if (isNew.value === true) return defaultValues;
if (preset.value === null) return defaultValues;
let scope = 'all';
@@ -400,85 +397,7 @@ export default defineComponent({
return { backLink };
}
function useUsers() {
const loading = ref(false);
const users = ref<User[] | null>(null);
fetchUsers();
return { loading, users };
async function fetchUsers() {
loading.value = true;
try {
const response = await api.get(`/users`, {
params: {
fields: ['email', 'first_name', 'last_name', 'id'],
},
});
users.value = response.data.data.map((user: any) => ({
name: userName(user),
id: user.id,
}));
} catch (err) {
unexpectedError(err);
} finally {
loading.value = false;
}
}
}
function useRoles() {
const loading = ref(false);
const roles = ref<Role[] | null>(null);
fetchRoles();
return { loading, roles };
async function fetchRoles() {
loading.value = true;
try {
const response = await api.get(`/roles`, {
params: {
fields: ['name', 'id'],
},
});
roles.value = response.data.data;
} catch (err) {
unexpectedError(err);
} finally {
loading.value = false;
}
}
}
function useForm() {
const scopeChoices = computed(() => {
if (usersLoading.value || rolesLoading.value) return [];
const options = [
{
text: i18n.t('global') + ': ' + i18n.t('all'),
value: 'all',
},
];
roles.value?.forEach((role) => {
options.push({ text: i18n.t('role') + ': ' + role.name, value: `role_${role.id}` });
});
users.value?.forEach((user) => {
options.push({ text: i18n.t('user') + ': ' + user.name, value: `user_${user.id}` });
});
return options;
});
const systemCollectionWhiteList = ['directus_users', 'directus_files', 'directus_activity'];
const fields = computed(() => [
@@ -508,10 +427,7 @@ export default defineComponent({
name: i18n.t('scope'),
type: 'string',
meta: {
interface: 'dropdown',
options: {
choices: scopeChoices.value,
},
interface: 'scope',
width: 'half',
},
},