Merge branch 'hotfix/readonly-banner' into develop

client/src/__generated__/gql.ts

@@ -18,7 +18,7 @@ const documents = {
     "\n  fragment ContentBlockHighlightsFragment on ContentBlockNode {\n    id\n    __typename\n    highlights {\n      ...HighlightParts\n    }\n  }\n": types.ContentBlockHighlightsFragmentFragmentDoc,
     "\n    query LanguageQuery {\n      me {\n        language @client\n      }\n    }\n  ": types.LanguageQueryDocument,
     "\n    mutation SetLanguage($language: String!) {\n      setLanguage(language: $language) @client {\n        language\n      }\n    }\n  ": types.SetLanguageDocument,
-    "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      ": types.ReadOnlyQueryDocument,
+    "\n  query ReadOnlyQuery {\n    me {\n      readOnly\n      selectedClass {\n        readOnly\n      }\n    }\n  }\n": types.ReadOnlyQueryDocument,
     "\n  fragment SubmissionParts on StudentSubmissionNode {\n    id\n    text\n    final\n    document\n    submissionFeedback {\n      id\n      text\n      teacher {\n        firstName\n        lastName\n      }\n    }\n  }\n": types.SubmissionPartsFragmentDoc,
     "\n  fragment AssignmentParts on AssignmentNode {\n    id\n    title\n    assignment\n    solution\n    submission {\n      ...SubmissionParts\n    }\n  }\n": types.AssignmentPartsFragmentDoc,
     "\n    query AssignmentQuery($id: ID!) {\n      assignment(id: $id) {\n        ...AssignmentParts\n      }\n    }\n  ": types.AssignmentQueryDocument,
@@ -97,7 +97,7 @@ export function graphql(source: "\n    mutation SetLanguage($language: String!)
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      "): (typeof documents)["\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      "];
+export function graphql(source: "\n  query ReadOnlyQuery {\n    me {\n      readOnly\n      selectedClass {\n        readOnly\n      }\n    }\n  }\n"): (typeof documents)["\n  query ReadOnlyQuery {\n    me {\n      readOnly\n      selectedClass {\n        readOnly\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

client/src/components/ReadOnlyBanner.vue

@@ -26,28 +26,13 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import gql from 'graphql-tag';
+import { graphql } from '@/__generated__';
 import { LICENSE_ACTIVATION } from '@/router/auth.names';
+import { useQuery } from '@vue/apollo-composable';
+import { computed } from 'vue';
 
-export default {
+const query = graphql(`
-  data() {
-    return {
-      me: {
-        readOnly: false,
-        selectedClass: {
-          readOnly: false,
-        },
-      },
-      licenseActivationLink: {
-        name: LICENSE_ACTIVATION,
-      },
-    };
-  },
-
-  apollo: {
-    me: {
-      query: gql`
   query ReadOnlyQuery {
     me {
       readOnly
@@ -56,30 +41,34 @@ export default {
       }
     }
   }
-      `,
+`);
+
+const { result } = useQuery(query, null, {
   fetchPolicy: 'cache-only',
-      update({ me }) {
+});
-        if (!me) {
+
-          return {
+const me = computed(() => {
+  const me = result.value?.me;
+  return (
+    me || {
       readOnly: false,
       selectedClass: {
         readOnly: false,
       },
-          };
     }
-        return me;
+  );
-      },
+});
-    },
-  },
 
-  computed: {
+const isReadOnly = computed(() => {
-    readOnlyText() {
+  return me.value.readOnly || me.value.selectedClass?.readOnly;
-      return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
+});
-    },
+
-    isReadOnly() {
+const readOnlyText = computed(() => {
-      return this.me.readOnly || this.me.selectedClass?.readOnly;
+  return me.value.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
-    },
+});
-  },
+
+const licenseActivationLink = {
+  name: LICENSE_ACTIVATION,
 };
 </script>
 

client/src/graphql/cache.ts

@@ -61,6 +61,7 @@ const typePolicies = {
     keyFields: ['slug'],
   },
   PrivateUserNode: {
+    keyFields: [], // i should never see anyone else's PrivateUserNode, so this should be a singleton
     fields: {
       language: {
         read() {