Set up FLEx-lite view permissions and API features

sillsdev · Jun 5, 2024 · 890a72f · 890a72f
1 parent b9480d3
commit 890a72f
Show file tree

Hide file tree

Showing 23 changed files with 306 additions and 156 deletions.
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/+page.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
   import 'viewer/component';
-  import {type LexboxServiceProvider} from 'viewer/service-provider';
+  import {LexboxService} from 'viewer/service-provider';
   import {LfClassicLexboxApi} from './lfClassicLexboxApi';
   import type {PageData} from './$types';
 
   export let data: PageData;
+  $: project = data.project;
 
-  const serviceProvider: LexboxServiceProvider = window.lexbox.ServiceProvider;
+  const serviceProvider = window.lexbox.ServiceProvider;
   let service: LfClassicLexboxApi;
   $: {
     if (serviceProvider) {
-      let localService = new LfClassicLexboxApi(data.code);
-      serviceProvider.setService('LexboxApi', localService);
+      let localService = new LfClassicLexboxApi($project.code);
+      serviceProvider.setService(LexboxService.LexboxApi, localService);
       service = localService;
     }
   }
 
 </script>
 {#if service}
   {#key service}
-    <lexbox-svelte></lexbox-svelte>
+    <lexbox-svelte projectName={$project.name}></lexbox-svelte>
   {/key}
 {/if}
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/+page.ts b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/+page.ts
@@ -1,5 +1,33 @@
-import type {PageLoadEvent} from './$types';
+import { getClient, graphql } from '$lib/gql';
+
+import type {PageLoadEvent} from './$types';
+import { error } from '@sveltejs/kit';
+import { tryMakeNonNullable } from '$lib/util/store';
+
 export const ssr = false; // 💖
-export function load(event: PageLoadEvent) {
-  return {code: event.params.project_code};
+export async function load(event: PageLoadEvent) {
+  const client = getClient();
+  const projectCode = event.params.project_code;
+  const projectResult = await client
+    .awaitedQueryStore(event.fetch,
+      graphql(`
+				query viewerProject($projectCode: String!) {
+					projectByCode(code: $projectCode) {
+						id
+						name
+            code
+          }
+				}
+			`),
+      { projectCode }
+    );
+
+  const nonNullableProject = tryMakeNonNullable(projectResult.projectByCode);
+  if (!nonNullableProject) {
+    error(404);
+  }
+
+  return {
+    project: nonNullableProject,
+  };
 }
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts
@@ -1,18 +1,23 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import {
   type IEntry, type IExampleSentence, type ISense, type JsonPatch,
-  type LexboxApi,
   type QueryOptions,
   type WritingSystems,
   type WritingSystemType,
-  type WritingSystem
+  type WritingSystem,
+  type LexboxApiClient,
+  type LexboxApiFeatures
 } from 'viewer/lexbox-api';
 
 
-export class LfClassicLexboxApi implements LexboxApi {
+export class LfClassicLexboxApi implements LexboxApiClient {
   constructor(private projectCode: string) {
   }
 
+  SupportedFeatures(): LexboxApiFeatures {
+    return {};
+  }
+
   async GetWritingSystems(): Promise<WritingSystems> {
     const result = await fetch(`/api/lfclassic/${this.projectCode}/writingSystems`);
     return (await result.json()) as WritingSystems;

diff --git a/frontend/viewer/index.html b/frontend/viewer/index.html
@@ -15,7 +15,7 @@
   </head>
   <body>
     <div id="app" class="contents">
-      <lexbox-svelte></lexbox-svelte>
+      <lexbox-svelte projectName="Test project"></lexbox-svelte>
     </div>
     <script type="module" src="./src/main.ts"></script>
   </body>

diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json
@@ -41,7 +41,7 @@
     "postcss": "^8.4.38",
     "svelte-preprocess": "^5.1.4",
     "svelte-routing": "^2.12.0",
-    "svelte-ux": "^0.62.10",
+    "svelte-ux": "^0.66.4",
     "type-fest": "^4.18.2"
   }
 }
diff --git a/frontend/viewer/src/CrdtProjectView.svelte b/frontend/viewer/src/CrdtProjectView.svelte
@@ -18,4 +18,4 @@
   SetupSignalR(connection);
   let connected = false;
 </script>
-<ProjectView isConnected={connected}></ProjectView>
+<ProjectView {projectName} isConnected={connected}></ProjectView>
diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
@@ -7,10 +7,10 @@
   import {useLexboxApi} from './lib/services/service-provider';
   import type {IEntry} from './lib/mini-lcm';
   import {setContext} from 'svelte';
-  import {derived, writable} from 'svelte/store';
+  import {derived, writable, type Readable} from 'svelte/store';
   import {deriveAsync} from './lib/utils/time';
-  import type {ViewConfig} from './lib/config-types';
-  import ViewOptions from './lib/layout/ViewOptions.svelte';
+  import {type ViewConfig, type LexboxPermissions, type ViewOptions, type LexboxFeatures} from './lib/config-types';
+  import ViewOptionsDrawer from './lib/layout/ViewOptionsDrawer.svelte';
   import EntryList from './lib/layout/EntryList.svelte';
   import Toc from './lib/layout/Toc.svelte';
   import {fade} from 'svelte/transition';
@@ -21,21 +21,36 @@
 
   export let loading = false;
 
-  const viewConfig = writable<ViewConfig>({
-    generateExternalChanges: false,
+  const lexboxApi = useLexboxApi();
+  const features = writable<LexboxFeatures>(lexboxApi.SupportedFeatures());
+  setContext<Readable<LexboxFeatures>>('features', features);
+
+  const permissions = writable<LexboxPermissions>({
+    write: true,
+    comment: true,
+  });
+
+  const options = writable<ViewOptions>({
     showExtraFields: false,
     hideEmptyFields: false,
     activeView: views[0],
-    readonly: undefined,
+    generateExternalChanges: false,
   });
 
-  setContext('viewConfig', derived(viewConfig, (config) => ({
-    ...config,
-    hideEmptyFields: config.hideEmptyFields || config.readonly,
-  })));
+  const viewConfig = derived([options, permissions, features], ([config, permissions, features]) => {
+    const readonly = !permissions.write || !features.write;
+    return {
+      ...config,
+      readonly,
+      hideEmptyFields: config.hideEmptyFields || readonly,
+    };
+  });
+
+  setContext<Readable<ViewConfig>>('viewConfig', viewConfig);
+
+  export let projectName: string;
   export let isConnected: boolean;
   $: connected.set(isConnected);
-  const lexboxApi = useLexboxApi();
 
   const connected = writable(false);
   const search = writable<string>('');
@@ -122,7 +137,7 @@
 </script>
 
 <div class="app flex flex-col PortalTarget">
-  <AppBar title="FLEx-Lite" class="bg-secondary min-h-12" menuIcon=''>
+  <AppBar title={projectName} class="bg-secondary min-h-12" menuIcon=''>
     <div class="flex-grow-0 flex-shrink-0 md:hidden mx-2" class:invisible={!pickedEntry}>
       <Button icon={mdiArrowLeft} size="sm" iconOnly rounded variant="outline" on:click={() => pickedEntry = false} />
     </div>
@@ -144,7 +159,9 @@
           Configure
         </div>
       </Button>
-      <ActivityView/>
+      {#if $features.history}
+        <ActivityView/>
+      {/if}
     </div>
   </AppBar>
 
@@ -160,7 +177,7 @@
         class="grid flex-grow items-start justify-stretch md:justify-center"
         style="grid-template-columns: minmax(0, min-content) minmax(0, min-content) minmax(0, min-content);"
       >
-        <div class="w-screen max-w-full md:w-[400px] collapsible-col" class:md:!w-[1024px]={expandList} class:max-md:collapse-col={pickedEntry}>
+        <div class="w-screen max-w-full md:w-[400px] collapsible-col side-scroller" class:md:!w-[1024px]={expandList} class:max-md:collapse-col={pickedEntry}>
           <EntryList bind:search={$search} entries={$entries} bind:expand={expandList} on:entrySelected={() => pickedEntry = true} />
         </div>
         <div class="max-w-full w-screen md:w-[65vw] collapsible-col" class:md:px-6={!expandList} class:max-md:pr-6={pickedEntry} class:md:collapse-col={expandList} class:max-md:collapse-col={!pickedEntry}>
@@ -216,7 +233,7 @@
       </div>
     </main>
 
-    <ViewOptions bind:open={showOptionsDialog} {viewConfig} />
+    <ViewOptionsDrawer bind:open={showOptionsDialog} {options} {features} />
 
   {/if}
 </div>
diff --git a/frontend/viewer/src/TestProjectView.svelte b/frontend/viewer/src/TestProjectView.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 import ProjectView from './ProjectView.svelte';
 import {InMemoryApiService} from './lib/in-memory-api-service';
-import {LexboxServices} from './lib/services/service-provider';
+import {LexboxService} from './lib/services/service-provider';
 
-window.lexbox.ServiceProvider.setService(LexboxServices.LexboxApi, new InMemoryApiService());
+const inMemoryLexboxApi = new InMemoryApiService();
+window.lexbox.ServiceProvider.setService(LexboxService.LexboxApi, inMemoryLexboxApi);
 </script>
-<ProjectView isConnected/>
+<ProjectView projectName={inMemoryLexboxApi.projectName} isConnected />
diff --git a/frontend/viewer/src/WebComponent.svelte b/frontend/viewer/src/WebComponent.svelte
@@ -6,6 +6,8 @@
 
   let loading = true;
 
+  export let projectName: string;
+
   onMount(() => {
     const shadowRoot = document.querySelector('lexbox-svelte')?.shadowRoot;
     if (!shadowRoot) throw new Error('Could not find shadow root');
@@ -42,5 +44,5 @@
 </style>
 
 <div class="app contents" class:dark={$currentTheme.dark}>
-  <ProjectView isConnected {loading} />
+  <ProjectView {projectName} isConnected {loading} />
 </div>
diff --git a/frontend/viewer/src/app.d.ts b/frontend/viewer/src/app.d.ts
@@ -0,0 +1,5 @@
+export { }; // for some reason this is required in order to make global changes
+
+declare global {
+  function enableDevMode(): void;
+}
diff --git a/frontend/viewer/src/lib/config-types.ts b/frontend/viewer/src/lib/config-types.ts
@@ -1,6 +1,7 @@
 import type { IEntry, IExampleSentence, IMultiString, ISense } from './mini-lcm';
 
 import type { ConditionalKeys } from 'type-fest';
+import type { LexboxApiFeatures } from './services/lexbox-api';
 import type { views } from './config-data';
 
 export type WritingSystemType = 'vernacular' | 'analysis';
@@ -49,10 +50,20 @@ export type ViewConfigFieldProps = {
   extra?: true,
 };
 
-export type ViewConfig = {
+export type LexboxFeatures = LexboxApiFeatures;
+
+export type LexboxPermissions = {
+  write: boolean,
+  comment: boolean,
+}
+
+export type ViewOptions = {
   generateExternalChanges: boolean,
   showExtraFields: boolean,
   hideEmptyFields: boolean,
   activeView: typeof views[number],
-  readonly?: true,
+}
+
+export type ViewConfig = ViewOptions & {
+  readonly?: boolean,
 }
diff --git a/frontend/viewer/src/lib/entry-data.ts b/frontend/viewer/src/lib/entry-data.ts
@@ -1,5 +1,7 @@
 import type { IEntry, WritingSystems } from './mini-lcm';
 
+export const projectName = 'Sena 3';
+
 export const writingSystems: WritingSystems = {
   'analysis': [
     {