Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor Shareable, DateInput, and UserSelect
Browse files Browse the repository at this point in the history
components
vincentauger committed Nov 16, 2023
1 parent 174fd65 commit 6415c02
Showing 5 changed files with 151 additions and 22 deletions.
19 changes: 13 additions & 6 deletions resources/src/components/DateInput.vue
Original file line number Diff line number Diff line change
@@ -36,12 +36,19 @@
<script setup lang="ts">
const { t } = useI18n();
const props = defineProps<{
modelValue: string | null;
required?: boolean;
minDate?: string | null;
maxDate?: string | null;
}>();
const props = withDefaults(
defineProps<{
modelValue: string | null;
required?: boolean;
minDate?: string | null;
maxDate?: string | null;
}>(),
{
required: false,
minDate: null,
maxDate: null,
},
);
const emit = defineEmits(['update:modelValue']);
Original file line number Diff line number Diff line change
@@ -7,20 +7,22 @@
:shareables="shareables"
:readonly="readonly"
:loading="loading"
@edit="updateShareables"
@edit="editShareable"
@delete="deleteShareable"
/>
<q-btn
v-if="!readonly"
color="primary"
label="Share"
icon="share"
@click="showShareDialog = true"
@click="createShareable"
/>
<ShareItemDialog
v-if="manuscript"
:id="editShareableItem?.id || 0"
v-model="showShareDialog"
shareable-type="manuscript-records"
:shareable="editShareableItem"
:shareable-model-id="manuscript?.data.id"
/>
</ContentCard>
@@ -29,6 +31,7 @@
<script setup lang="ts">
import ContentCard from '@/components/ContentCard.vue';
import {
Shareable,
ShareableResource,
ShareableResourceList,
ShareableService,
@@ -64,12 +67,6 @@ const readonly = computed<boolean>(() => {
const $q = useQuasar();
const { t } = useI18n();
async function updateShareables(shareable: ShareableResource) {
loading.value = true;
console.log(shareable);
loading.value = false;
}
async function deleteShareable(shareable: ShareableResource) {
loading.value = true;
console.log(shareable);
@@ -88,10 +85,23 @@ async function deleteShareable(shareable: ShareableResource) {
}
/**
* Create Shareable Section
* Create or Edit Shareable Section
*/
const showShareDialog = ref(false);
const editShareableItem = ref<Shareable | undefined>(undefined);
function createShareable() {
editShareableItem.value = undefined;
showShareDialog.value = true;
}
function editShareable(shareable: ShareableResource) {
if (shareable.data == undefined) {
throw new Error('Shareable data is undefined');
}
editShareableItem.value = shareable.data;
showShareDialog.value = true;
}
</script>

<style scoped></style>
7 changes: 6 additions & 1 deletion resources/src/models/Shareable/Shareable.ts
Original file line number Diff line number Diff line change
@@ -58,7 +58,12 @@ export class ShareableService {
return response.data;
}

public async update(shareable: Shareable) {
public async update(
shareable: Pick<
Shareable,
'id' | 'can_edit' | 'can_delete' | 'expires_at'
>,
) {
const request = {
can_edit: shareable.can_edit,
can_delete: shareable.can_delete,
108 changes: 105 additions & 3 deletions resources/src/models/Shareable/components/ShareItemDialog.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,69 @@
<template>
<BaseDialog :title="title"> We made it here! </BaseDialog>
<BaseDialog :title="title">
<q-card-section class="q-mt-md">
<q-form class="q-gutter-md" autofocus @submit="save">
<p v-if="!isEditDialog">
User with whom you want to share. The user will receive an
email notification once you create this resource.
</p>
<UserSelect v-model="user_id" :readonly="isEditDialog" />
<div>
By default, the user has the ability to view the ressource.
You can also allow th user to edit and delete this resource.
</div>
<q-card bordered flat class="q-pa-sm">
<q-toggle
v-model="can_edit"
label="Can Edit"
color="primary"
checked-icon="mdi-check"
unchecked-icon="mdi-close"
size="md"
/>
<q-toggle
v-model="can_delete"
label="Can Delete"
color="primary"
checked-icon="mdi-check"
unchecked-icon="mdi-close"
size="md"
/>
</q-card>
<div>
By default, the resource is shared until you manually remove
the ability. If you prefer, you can also set an expiration
date at which time the user will no longer be able to access
this resource.
</div>
<DateInput v-model="expires_at" label="Expires At" clearable />
<div class="flex justify-end">
<q-btn
v-close-popup
:label="$t('common.cancel')"
class="q-mr-md"
/>
<q-btn
:label="$t('common.save')"
type="submit"
color="primary"
data-cy="save"
/>
</div>
</q-form>
</q-card-section>
</BaseDialog>
</template>

<script setup lang="ts">
import BaseDialog from '@/components/BaseDialog.vue';
import { ShareableModel, Shareable } from '@/models/Shareable/Shareable';
import DateInput from '@/components/DateInput.vue';
import {
ShareableModel,
Shareable,
ShareableService,
ShareableResource,
} from '@/models/Shareable/Shareable';
import UserSelect from '@/models/User/components/UserSelect.vue';
const props = withDefaults(
defineProps<{
@@ -17,10 +76,19 @@ const props = withDefaults(
},
);
const emit = defineEmits<{
updated: [sharable: ShareableResource];
created: [sharable: ShareableResource];
}>();
const { t } = useI18n();
const isEditDialog = computed(() => {
return props.shareable != undefined;
});
const title = computed(() => {
if (props.shareable == undefined) {
if (!isEditDialog.value) {
switch (props.shareableType) {
case 'manuscript-records':
return t('mrf.share-dialog-title');
@@ -30,5 +98,39 @@ const title = computed(() => {
}
return t('shareable.edit-dialog-title');
});
const user_id = ref(props.shareable?.user_id || null);
const can_edit = ref(props.shareable?.can_edit || false);
const can_delete = ref(props.shareable?.can_delete || false);
const expires_at = ref(props.shareable?.expires_at || null);
// logic to ensure permission consistency
watch(can_delete, (value) => {
if (value) {
can_edit.value = true;
}
});
watch(can_edit, (value) => {
if (!value) {
can_delete.value = false;
}
});
const shareableService = new ShareableService(
props.shareableType,
props.shareableModelId,
);
async function save() {
if (props.shareable) {
const updatedShareable = await shareableService.update({
id: props.shareable.id,
can_edit: can_edit.value,
can_delete: can_delete.value,
expires_at: expires_at.value,
});
emit('updated', updatedShareable);
}
}
</script>
<style scoped></style>
9 changes: 7 additions & 2 deletions resources/src/models/User/components/UserSelect.vue
Original file line number Diff line number Diff line change
@@ -12,6 +12,8 @@
use-input
stack-label
outlined
:readonly="props.readonly"
:hide-hint="props.readonly"
hint="Start typing to search for an user (first name, last name, or email)"
@filter="filterUsers"
@clear="selectedUser = null"
@@ -104,11 +106,13 @@ const props = withDefaults(
modelValue: number | null;
disabledEmails?: string[];
disabledIds?: number[];
readonly?: boolean;
}>(),
{
disabledEmails: () => [],
disabledIds: () => [],
}
readonly: false,
},
);
const users = ref<UserResourceList>({ data: [] });
@@ -127,6 +131,7 @@ watch(selectedUser, (user) => {
});
onMounted(async () => {
console.log('here', props.modelValue);
if (props.modelValue) {
const user = await UserService.get(props.modelValue);
selectedUser.value = user;
@@ -142,7 +147,7 @@ const filterUsers = async (val: string, update, abort) => {
await UserService.list(`limit=10&filter[search]=${needle}`).then(
(response) => {
users.value = response;
}
},
);
usersLoading.value = false;
}

0 comments on commit 6415c02

Please sign in to comment.