Disable selected subjects in book edit modal

svelte-kit/package.json

@@ -28,6 +28,6 @@
     "classnames": "^2.3.2",
     "mongodb": "^4.12.1",
     "sass": "^1.56.1",
-    "svelte-helpers": "^0.2.12"
+    "svelte-helpers": "^0.2.13"
   }
 }

svelte-kit/src/data/subjects.ts

@@ -8,7 +8,11 @@ export const allSubjects = async () => {
 
   const result: Subject[] = (await db
     .collection("subjects")
-    .aggregate([{ $match: { userId: "60a93babcc3928454b5d1cc6" } }, { $project: { _id: 1, name: 1, path: 1 } }, { $sort: { name: 1 } }])
+    .aggregate([
+      { $match: { userId: "60a93babcc3928454b5d1cc6" } },
+      { $project: { _id: 1, name: 1, path: 1, textColor: 1, backgroundColor: 1 } },
+      { $sort: { name: 1 } }
+    ])
     .toArray()) as Subject[];
 
   const nativeEnd = +new Date();

svelte-kit/src/data/tags.ts

@@ -1,5 +1,5 @@
 import { env } from "$env/dynamic/private";
-import type { Tag, TagHash } from "./types";
+import type { Hash, Tag } from "./types";
 
 export const allTags = async () => {
   const httpStart = +new Date();
@@ -23,7 +23,7 @@ export const allTags = async () => {
       console.log("HTTP tags time", httpEnd - httpStart);
 
       const tags = res.documents as Tag[];
-      const tagHash = tags.reduce<TagHash>((hash, tag) => {
+      const tagHash = tags.reduce<Hash<Tag>>((hash, tag) => {
         hash[tag._id] = tag;
         return hash;
       }, {});

svelte-kit/src/data/types.ts

@@ -1,6 +1,8 @@
 export type Subject = {
   _id: string;
   name: string;
+  textColor: string;
+  backgroundColor: string;
   path: string;
 };
 
@@ -13,15 +15,11 @@ export type FullSubject = Subject & {
   childLevel: number;
 };
 
-export type SubjectHash = {
-  [_id: string]: FullSubject;
+export type Hash<T> = {
+  [_id: string]: T;
 };
 
 export type Tag = {
   _id: string;
   name: string;
 };
-
-export type TagHash = {
-  [_id: string]: Tag;
-};

svelte-kit/src/lib/components/editBook/EditBookInfo.svelte

@@ -10,7 +10,7 @@
   import SelectAvailableSubjects from "$lib/components/subjectsAndTags/subjects/SelectAvailableSubjects.svelte";
 
   import DisplaySelectedTags from "$lib/components/subjectsAndTags/tags/DisplaySelectedTags.svelte";
-  //import DisplaySelectedSubjects from "app/components/subjectsAndTags/subjects/DisplaySelectedSubjects.svelte";
+  import DisplaySelectedSubjects from "$lib/components/subjectsAndTags/subjects/DisplaySelectedSubjects.svelte";
   import FlexRow from "../layout/FlexRow.svelte";
   import FlowItems from "../layout/FlowItems.svelte";
 
@@ -25,7 +25,7 @@
     editingBook = { ...book };
   }
 
-  const addSubject = (subject: any) => (editingBook.subjects = editingBook.subjects.concat(subject._id));
+  const addSubject = (subject: Subject) => (editingBook.subjects = editingBook.subjects.concat(subject._id));
   const removeSubject = (subject: any) => (editingBook.subjects = editingBook.subjects.filter(_id => _id != subject._id));
 
   const addTag = (tag: any) => (editingBook.tags = editingBook.tags.concat(tag._id));
@@ -122,7 +122,7 @@
             <SelectAvailableSubjects {subjects} currentlySelected={editingBook.subjects} onSelect={addSubject} />
           </div>
           <div style="display: {editingBook.subjects.length ? '' : 'none'}" class="col-sm-9 col-xs-12">
-            <!-- <DisplaySelectedSubjects currentlySelected={editingBook.subjects} onRemove={removeSubject} /> -->
+            <DisplaySelectedSubjects {subjects} currentlySelected={editingBook.subjects} onRemove={removeSubject} />
           </div>
         </FlexRow>
       </div>

svelte-kit/src/lib/components/subjectsAndTags/subjects/DisplaySelectedSubjects.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
+  import type { Subject } from "$data/types";
+
   import RemovableLabelDisplay from "../RemovableLabelDisplay.svelte";
   import LabelDisplay from "../LabelDisplay.svelte";
-  import { subjectsState } from "app/state/subjectsState";
   import FlowItems from "../../layout/FlowItems.svelte";
+  import { toHash } from "$lib/state/helpers";
 
   export let currentlySelected: any[];
   export let onRemove: any;
 
-  $: ({ subjectHash } = $subjectsState);
+  export let subjects: Subject[];
+
+  $: subjectHash = toHash(subjects);
 </script>
 
 <FlowItems tightest={true}>

svelte-kit/src/lib/components/subjectsAndTags/subjects/SelectAvailableSubjects.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
-  import type { Subject } from "$data/types";
+  import type { DisablableSubject, Subject } from "$data/types";
   import type { Label } from "../types";
   import { filterSubjects, subjectState } from "$lib/state/subjectsState";
 
   import GenericLabelSelect from "../GenericLabelSelect.svelte";
 
-  export let onSelect: (item: Label) => void;
+  export let onSelect: (item: DisablableSubject) => void;
   export let placeholder = "Subjects";
   export let currentlySelected: string[] = [];
 
   export let subjects: Subject[];
 
   let search = "";
 
-  const doSelect = (item: Label) => {
+  const doSelect = (item: DisablableSubject) => {
+    if (item.disabled) {
+      return false;
+    }
     onSelect(item);
     search = "";
   };

svelte-kit/src/lib/components/subjectsAndTags/tags/DisplaySelectedTags.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import type { Tag } from "$data/types";
+  import { toHash } from "$lib/state/helpers";
+
   import RemovableLabelDisplay from "../RemovableLabelDisplay.svelte";
   import LabelDisplay from "../LabelDisplay.svelte";
-
   import FlowItems from "../../layout/FlowItems.svelte";
-  import type { Tag } from "$data/types";
-  import { toHash } from "$lib/state/tagsState";
 
   export let tags: Tag[];
   export let onRemove: ((tag: Tag) => void) | null = null;

svelte-kit/src/lib/state/helpers.ts

@@ -0,0 +1,12 @@
+import type { Hash } from "$data/types";
+
+type WithId = {
+  _id: string;
+};
+
+export const toHash = <T extends WithId>(items: T[]): Hash<T> => {
+  return items.reduce<Hash<T>>((hash, tag) => {
+    hash[tag._id] = tag;
+    return hash;
+  }, {});
+};

svelte-kit/src/lib/state/subjectsState.ts

@@ -1,4 +1,5 @@
-import type { DisablableSubject, FullSubject, Subject, SubjectHash } from "$data/types";
+import type { DisablableSubject, FullSubject, Hash, Subject } from "$data/types";
+import { toHash } from "./helpers";
 
 export const subjectState = (allSubjectsSorted: Subject[] = []) => {
   const subjects = stackAndGetTopLevelSubjects(allSubjectsSorted);
@@ -33,17 +34,10 @@ export const unwindSubjects = (subjects: FullSubject[]): FullSubject[] => {
   return result;
 };
 
-export const toHash = (subjects: FullSubject[]): SubjectHash => {
-  return subjects.reduce<SubjectHash>((hash, tag) => {
-    hash[tag._id] = tag;
-    return hash;
-  }, {});
-};
-
 type LookupHash = { [_id: string]: true };
 type SearchFn = (s: Subject) => boolean;
 
-export const filterSubjects = (subjects: Subject[], search?: string, lookupMap: SubjectHash = {}, alreadySelected: LookupHash = {}) => {
+export const filterSubjects = (subjects: Subject[], search?: string, lookupMap: Hash<FullSubject> = {}, alreadySelected: LookupHash = {}) => {
   let searchFn: SearchFn;
   if (!search) {
     searchFn = s => !alreadySelected[s._id];

svelte-kit/src/lib/state/tagsState.ts

@@ -1,11 +1,4 @@
-import type { Tag, TagHash } from "$data/types";
-
-export const toHash = (tags: Tag[]): TagHash => {
-  return tags.reduce<TagHash>((hash, tag) => {
-    hash[tag._id] = tag;
-    return hash;
-  }, {});
-};
+import type { Tag } from "$data/types";
 
 export const filterTags = (tags: Tag[], search: string) => {
   let filterFn: (txt: string) => boolean;

svelte-kit/src/routes/(logged-in)/books/SearchModal.svelte

@@ -14,7 +14,7 @@
   // import SelectAvailableSubjects from "app/components/subjectsAndTags/subjects/SelectAvailableSubjects.svelte";
   // import DisplaySelectedTags from "app/components/subjectsAndTags/tags/DisplaySelectedTags.svelte";
   import SelectAvailableTags from "$lib/components/subjectsAndTags/tags/SelectAvailableTags.svelte";
-  import type { Tag, TagHash } from "$data/types";
+  import type { Hash, Tag } from "$data/types";
 
   // import { currentSearch } from "./booksSearchState";
   // import { applyFilters } from "./setBookFilters";
@@ -24,7 +24,7 @@
   export let onHide = () => {};
 
   export let allTags: Tag[];
-  export let tagHash: TagHash[];
+  export let tagHash: Hash<Tag>;
 
   let closeModal: any;