fix sharing + trick user so that they don't have to click one of the box

LycheeOrg · Oct 23, 2024 · 682f4f1 · 682f4f1
1 parent b3dbe78
commit 682f4f1
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 34 deletions.
diff --git a/resources/js/components/forms/album/AlbumShare.vue b/resources/js/components/forms/album/AlbumShare.vue
@@ -5,22 +5,15 @@
 				<div class="w-5/12 flex">
 					<span class="w-full">{{ $t("lychee.USERNAME") }}</span>
 				</div>
-				<div class="w-1/12 flex justify-center items-center">
+				<div class="w-1/2 flex justify-around items-center">
+					<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
 					<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-download" v-tooltip.top="'Grants download'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />
 				</div>
-				<div class="w-16"></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" />

diff --git a/resources/js/components/forms/album/SearchTargetUser.vue b/resources/js/components/forms/album/SearchTargetUser.vue
@@ -25,7 +25,7 @@
 	</Select>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import Select from "primevue/select";
 import UsersService from "@/services/users-service";
 
@@ -44,13 +44,12 @@ const emits = defineEmits<{
 
 const options = ref(undefined as undefined | App.Http.Resources.Models.LightUserResource[]);
 const selectedTarget = ref(undefined as App.Http.Resources.Models.LightUserResource | undefined);
+const userList = ref(undefined as App.Http.Resources.Models.LightUserResource[] | undefined);
 
 function load() {
 	UsersService.get().then((response) => {
-		options.value = response.data.filter((user) => !props.filteredUsersIds.includes(user.id));
-		if (options.value.length === 0) {
-			emits("no-target");
-		}
+		userList.value = response.data;
+		filterUsers();
 	});
 }
 
@@ -63,4 +62,17 @@ function selected() {
 
 	emits("selected", selectedTarget.value);
 }
+
+function filterUsers() {
+	if (userList.value === undefined) {
+		return;
+	}
+
+	options.value = userList.value.filter((user) => !props.filteredUsersIds.includes(user.id));
+	if (options.value.length === 0) {
+		emits("no-target");
+	}
+}
+
+watch(() => props.filteredUsersIds, filterUsers);
 </script>
diff --git a/resources/js/components/forms/sharing/CreateSharing.vue b/resources/js/components/forms/sharing/CreateSharing.vue
@@ -7,19 +7,12 @@
 		<div class="w-5/12 flex" v-if="!newShareUser">
 			<SearchTargetUser @selected="selectUser" :filtered-users-ids="props.filteredUsersIds" />
 		</div>
-		<div class="w-1/12 flex justify-center items-center">
+		<div class="w-1/2 flex items-center justify-around">
+			<Checkbox v-model="grantsReadAccess" :binary="true" disabled />
 			<Checkbox v-model="grantsFullPhotoAccess" :binary="true" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsDownload" :binary="true" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsUpload" :binary="true" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsEdit" :binary="true" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsDelete" :binary="true" />
 		</div>
 		<Button @click="create" :disabled="!newShareUser" class="border-0 bg-surface text-create-600 hover:bg-create-600 hover:text-white w-1/6">
@@ -58,6 +51,7 @@ 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;

diff --git a/resources/js/components/forms/sharing/ShareLine.vue b/resources/js/components/forms/sharing/ShareLine.vue
@@ -4,19 +4,12 @@
 			<span v-if="props.withAlbum" class="w-full">{{ props.perm.album_title }}</span>
 			<span class="w-full">{{ props.perm.username }}</span>
 		</div>
-		<div class="w-1/12 flex justify-center items-center">
+		<div class="w-1/2 flex items-center justify-around">
+			<Checkbox v-model="grantsReadAccess" :binary="true" disabled />
 			<Checkbox v-model="grantsFullPhotoAccess" :binary="true" @update:model-value="edit" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsDownload" :binary="true" @update:model-value="edit" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsUpload" :binary="true" @update:model-value="edit" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsEdit" :binary="true" @update:model-value="edit" />
-		</div>
-		<div class="w-1/12 flex justify-center items-center">
 			<Checkbox v-model="grantsDelete" :binary="true" @update:model-value="edit" />
 		</div>
 		<Button @click="deletePermission" class="border-0 bg-surface text-danger-600 hover:bg-danger-700 hover:text-white w-1/6">
@@ -47,6 +40,7 @@ const grantsDownload = ref(false);
 const grantsUpload = ref(false);
 const grantsEdit = ref(false);
 const grantsDelete = ref(false);
+const grantsReadAccess = ref(true);
 
 function load(permisison: App.Http.Resources.Models.AccessPermissionResource) {
 	grantsFullPhotoAccess.value = permisison.grants_full_photo_access;

diff --git a/resources/js/style/preset.ts b/resources/js/style/preset.ts
@@ -287,12 +287,45 @@ const LycheePrimeVueConfig = {
 		},
 		checkbox: {
 			colorScheme: {
-				light: {},
+				light: {
+					disabled: {
+						background: "{surface.100}",
+						border: "{surface.100}",
+					},
+					checked: {
+						disabled: {
+							border: {
+								color: "{surface.100}",
+							},
+						},
+					},
+					icon: {
+						disabled: {
+							color: "{primary-500}",
+						},
+					},
+				},
 				dark: {
 					background: "{surface.800}",
 					border: {
 						color: "{surface.700}",
 					},
+					disabled: {
+						background: "{surface.700}",
+						border: "{surface.700}",
+					},
+					checked: {
+						disabled: {
+							border: {
+								color: "{surface.700}",
+							},
+						},
+					},
+					icon: {
+						disabled: {
+							color: "{primary-500}",
+						},
+					},
 				},
 			},
 		},