Add modal for creating sharing (#2938)

LycheeOrg · Jan 29, 2025 · a341b80 · a341b80
1 parent 493b111
commit a341b80
Show file tree

Hide file tree

Showing 23 changed files with 178 additions and 21 deletions.
diff --git a/lang/cz/sharing.php b/lang/cz/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/de/sharing.php b/lang/de/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/el/sharing.php b/lang/el/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/en/sharing.php b/lang/en/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/es/sharing.php b/lang/es/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/fr/sharing.php b/lang/fr/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/hu/sharing.php b/lang/hu/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/it/sharing.php b/lang/it/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/ja/sharing.php b/lang/ja/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/nl/sharing.php b/lang/nl/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/no/sharing.php b/lang/no/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/pl/sharing.php b/lang/pl/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/pt/sharing.php b/lang/pt/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/ru/sharing.php b/lang/ru/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/sk/sharing.php b/lang/sk/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/sv/sharing.php b/lang/sv/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/vi/sharing.php b/lang/vi/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/zh_CN/sharing.php b/lang/zh_CN/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/lang/zh_TW/sharing.php b/lang/zh_TW/sharing.php
@@ -19,6 +19,7 @@
 	'username' => 'Username',
 	'no_data' => 'Sharing list is empty.',
 	'share' => 'Share',
+	'add_new_access_permission' => 'Add a new access permission',
 	'permission_deleted' => 'Permission deleted!',
 	'permission_created' => 'Permission created!',
 

diff --git a/resources/js/components/forms/album/AlbumCreateShareDialog.vue b/resources/js/components/forms/album/AlbumCreateShareDialog.vue
@@ -0,0 +1,120 @@
+<template>
+	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true" @close="visible = false">
+		<template #container="{ closeCallback }">
+			<div class="flex flex-col relative md:w-[500px] max-w-[500px] text-sm rounded-md pt-9">
+				<div class="flex text-muted-color-emphasis w-full px-9 pb-2">
+					<div class="w-1/2">
+						<span class="w-full">{{ $t("sharing.username") }}</span>
+					</div>
+					<div class="w-1/2 flex justify-around items-center">
+						<i class="pi pi-eye" v-tooltip.top="$t('sharing.grants.read')" />
+						<i class="pi pi-window-maximize" v-tooltip.top="$t('sharing.grants.original')" />
+						<i class="pi pi-cloud-download" v-tooltip.top="$t('sharing.grants.download')" />
+						<i class="pi pi-upload" v-tooltip.top="$t('sharing.grants.upload')" />
+						<i class="pi pi-file-edit" v-tooltip.top="$t('sharing.grants.edit')" />
+						<i class="pi pi-trash" v-tooltip.top="$t('sharing.grants.delete')" />
+					</div>
+				</div>
+				<div class="flex text-muted-color-emphasis w-full px-9">
+					<div class="w-1/2 flex items-center" v-if="newShareUser">
+						<span class="w-full">{{ newShareUser.username }}</span>
+						<span @click="newShareUser = undefined"><i class="pi pi-times" /></span>
+					</div>
+					<div class="w-1/2" v-if="!newShareUser">
+						<SearchTargetUser @selected="selectUser" :filtered-users-ids="props.filteredUsersIds" />
+					</div>
+					<div class="w-1/2 flex items-center justify-around">
+						<Checkbox v-model="grantsReadAccess" :binary="true" disabled />
+						<Checkbox v-model="grantsFullPhotoAccess" :binary="true" />
+						<Checkbox v-model="grantsDownload" :binary="true" />
+						<Checkbox v-model="grantsUpload" :binary="true" />
+						<Checkbox v-model="grantsEdit" :binary="true" />
+						<Checkbox v-model="grantsDelete" :binary="true" />
+					</div>
+				</div>
+				<div class="flex items-center mt-9 w-full">
+					<Button @click="closeCallback" severity="secondary" class="w-full font-bold border-none rounded-bl-xl">
+						{{ $t("dialogs.button.cancel") }}
+					</Button>
+					<Button
+						@click="create"
+						:disabled="!newShareUser"
+						class="font-bold w-full border-none rounded-none bg-surface text-create-600 hover:bg-create-600 hover:text-white rounded-br-xl"
+					>
+						<i class="pi pi-user-plus" /><span class="hidden md:inline">{{ $t("sharing.share") }}</span>
+					</Button>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import SharingService from "@/services/sharing-service";
+import { trans } from "laravel-vue-i18n";
+import Dialog from "primevue/dialog";
+import { useToast } from "primevue/usetoast";
+import { ref } from "vue";
+import SearchTargetUser from "./SearchTargetUser.vue";
+import Checkbox from "primevue/checkbox";
+import Button from "primevue/button";
+
+const props = withDefaults(
+	defineProps<{
+		album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.TagAlbumResource;
+		filteredUsersIds?: number[];
+	}>(),
+	{
+		filteredUsersIds: () => [],
+	},
+);
+
+const visible = defineModel("visible", { type: Boolean, required: true });
+
+const toast = useToast();
+const emits = defineEmits<{
+	createdPermission: [];
+}>();
+
+const newShareUser = ref<App.Http.Resources.Models.LightUserResource | undefined>(undefined);
+const grantsFullPhotoAccess = ref(false);
+const grantsDownload = ref(false);
+const grantsUpload = ref(false);
+const grantsEdit = ref(false);
+const grantsDelete = ref(false);
+const grantsReadAccess = ref(true);
+
+function selectUser(target: App.Http.Resources.Models.LightUserResource) {
+	newShareUser.value = target;
+}
+
+function reset() {
+	newShareUser.value = undefined;
+	grantsFullPhotoAccess.value = false;
+	grantsDownload.value = false;
+	grantsUpload.value = false;
+	grantsEdit.value = false;
+	grantsDelete.value = false;
+}
+
+function create() {
+	if (newShareUser.value === undefined) {
+		return;
+	}
+	const data = {
+		album_ids: [props.album.id],
+		user_ids: [newShareUser.value.id],
+		grants_download: grantsDownload.value,
+		grants_full_photo_access: grantsFullPhotoAccess.value,
+		grants_upload: grantsUpload.value,
+		grants_edit: grantsEdit.value,
+		grants_delete: grantsDelete.value,
+	};
+
+	SharingService.add(data).then(() => {
+		toast.add({ severity: "success", summary: trans("toasts.success"), detail: trans("sharing.permission_created"), life: 3000 });
+		visible.value = false;
+		reset();
+		emits("createdPermission");
+	});
+}
+</script>
diff --git a/resources/js/components/forms/album/AlbumProperties.vue b/resources/js/components/forms/album/AlbumProperties.vue
@@ -266,7 +266,7 @@
 						<label for="tags">{{ $t("gallery.album.properties.show_tags") }}</label>
 					</FloatLabel>
 				</div>
-				<Button class="p-3 mt-4 w-full font-bold border-none text-white hover:bg-primary-500 hover:text-surface-0 flex-shrink" @click="save">
+				<Button class="p-3 mt-4 w-full font-bold border-none flex-shrink" @click="save">
 					{{ $t("dialogs.button.save") }}
 				</Button>
 			</form>

diff --git a/resources/js/components/forms/album/AlbumShare.vue b/resources/js/components/forms/album/AlbumShare.vue
@@ -1,24 +1,39 @@
 <template>
-	<Card class="sm:p-4 xl:px-9 max-w-3xl w-full" v-if="perms !== undefined">
+	<Card class="sm:p-4 xl:px-9 max-w-3xl w-full py-0" pt:body:class="p-0" pt:content:class="flex justify-center flex-col">
 		<template #content>
-			<div class="flex text-muted-color-emphasis">
-				<div class="w-5/12 flex">
-					<span class="w-full">{{ $t("sharing.username") }}</span>
+			<ProgressSpinner v-if="perms === undefined" />
+			<template v-else>
+				<div class="flex text-muted-color-emphasis">
+					<div class="w-5/12 flex">
+						<span class="w-full">{{ $t("sharing.username") }}</span>
+					</div>
+					<div class="w-1/2 flex justify-around items-center">
+						<i class="pi pi-eye" v-tooltip.top="$t('sharing.grants.read')" />
+						<i class="pi pi-window-maximize" v-tooltip.top="$t('sharing.grants.original')" />
+						<i class="pi pi-cloud-download" v-tooltip.top="$t('sharing.grants.download')" />
+						<i class="pi pi-upload" v-tooltip.top="$t('sharing.grants.upload')" />
+						<i class="pi pi-file-edit" v-tooltip.top="$t('sharing.grants.edit')" />
+						<i class="pi pi-trash" v-tooltip.top="$t('sharing.grants.delete')" />
+					</div>
+					<div class="w-1/6"></div>
 				</div>
-				<div class="w-1/2 flex justify-around items-center">
-					<i class="pi pi-eye" v-tooltip.top="$t('sharing.grants.read')" />
-					<i class="pi pi-window-maximize" v-tooltip.top="$t('sharing.grants.original')" />
-					<i class="pi pi-cloud-download" v-tooltip.top="$t('sharing.grants.download')" />
-					<i class="pi pi-upload" v-tooltip.top="$t('sharing.grants.upload')" />
-					<i class="pi pi-file-edit" v-tooltip.top="$t('sharing.grants.edit')" />
-					<i class="pi pi-trash" v-tooltip.top="$t('sharing.grants.delete')" />
+				<ShareLine v-for="perm in perms" :perm="perm" @delete="deletePermission" :with-album="props.withAlbum" />
+				<div v-if="perms.length === 0">
+					<p class="text-muted-color text-center py-3">{{ $t("sharing.no_data") }}</p>
 				</div>
-				<div class="w-1/6"></div>
-			</div>
-			<ShareLine v-for="perm in perms" :perm="perm" @delete="deletePermission" :with-album="props.withAlbum" />
-			<CreateSharing :withAlbum="props.withAlbum" :album="props.album" @createdPermission="load" :filtered-users-ids="sharedUserIds" />
+				<Button @click="dialogVisible = true" severity="contrast" class="p-3 w-full mt-4 font-bold border-none rounded-xl">
+					{{ $t("sharing.add_new_access_permission") }}
+				</Button>
+			</template>
 		</template>
 	</Card>
+	<AlbumCreateShareDialog
+		v-if="!props.withAlbum"
+		v-model:visible="dialogVisible"
+		:album="props.album"
+		@createdPermission="load"
+		:filtered-users-ids="sharedUserIds"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -27,8 +42,10 @@ import Card from "primevue/card";
 import { useToast } from "primevue/usetoast";
 import SharingService from "@/services/sharing-service";
 import ShareLine from "@/components/forms/sharing/ShareLine.vue";
-import CreateSharing from "../sharing/CreateSharing.vue";
 import { trans } from "laravel-vue-i18n";
+import AlbumCreateShareDialog from "./AlbumCreateShareDialog.vue";
+import Button from "primevue/button";
+import ProgressSpinner from "primevue/progressspinner";
 
 const props = defineProps<{
 	withAlbum: boolean;
@@ -39,6 +56,8 @@ const toast = useToast();
 
 const perms = ref<App.Http.Resources.Models.AccessPermissionResource[] | undefined>(undefined);
 
+const dialogVisible = ref(false);
+
 function load() {
 	SharingService.get(props.album.id).then((response) => {
 		perms.value = response.data;

diff --git a/resources/js/components/forms/album/SearchTargetUser.vue b/resources/js/components/forms/album/SearchTargetUser.vue
@@ -18,14 +18,13 @@
 		</template>
 		<template #option="slotProps">
 			<div class="flex items-center">
-				<!-- <img :src="slotProps.option.thumb" alt="poster" class="w-4 rounded-sm" /> -->
 				<span class="text-left">{{ slotProps.option.username }}</span>
 			</div>
 		</template>
 	</Select>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import Select from "primevue/select";
 import UsersService from "@/services/users-service";
 
@@ -53,8 +52,6 @@ function load() {
 	});
 }
 
-load();
-
 function selected() {
 	if (selectedTarget.value === undefined) {
 		return;
@@ -74,5 +71,7 @@ function filterUsers() {
 	}
 }
 
+onMounted(load);
+
 watch(() => props.filteredUsersIds, filterUsers);
 </script>