Merge pull request #653 from dandi/view-edit-metadata

Switch between "view" and "edit" metadata button
dandi · May 7, 2021 · 4ac4fa5 · 4ac4fa5
2 parents 2639ca9 + a71493d
commit 4ac4fa5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 30 deletions.
diff --git a/web/src/views/DandisetLandingView/DandisetLandingView.vue b/web/src/views/DandisetLandingView/DandisetLandingView.vue
@@ -8,6 +8,7 @@
         v-if="DJANGO_API"
         :schema="schema"
         :model="meta"
+        :readonly="!userCanModifyDandiset"
         @close="edit = false"
       />
       <meta-editor
@@ -69,6 +70,7 @@
             <DandisetMain
               :schema="schema"
               :meta="meta"
+              :userCanModifyDandiset="userCanModifyDandiset"
               @edit="edit = true"
             />
           </v-col>
@@ -90,6 +92,7 @@ import { mapState } from 'vuex';
 import DandisetSearchField from '@/components/DandisetSearchField.vue';
 import { draftVersion } from '@/utils/constants';
 import toggles from '@/featureToggle';
+import { publishRest, user } from '@/rest';
 import MetaEditor from './MetaEditor.vue';
 import Meditor from './Meditor.vue';
 import DandisetMain from './DandisetMain.vue';
@@ -118,6 +121,7 @@ export default {
   data() {
     return {
       edit: false,
+      readonly: false,
       detailsPanel: true,
     };
   },
@@ -153,6 +157,22 @@ export default {
       dandisetVersions: (state) => state.versions,
       schema: (state) => state.schema,
     }),
+    user,
+  },
+  asyncComputed: {
+    userCanModifyDandiset: {
+      async get() {
+        if (this.user.admin) {
+          return true;
+        }
+
+        const { identifier } = this.publishDandiset.meta.dandiset;
+        const { data: owners } = await publishRest.owners(identifier);
+        const userExists = owners.find((owner) => owner.username === this.user.username);
+        return !!userExists;
+      },
+      default: false,
+    },
   },
   watch: {
     identifier: {

diff --git a/web/src/views/DandisetLandingView/DandisetMain.vue b/web/src/views/DandisetLandingView/DandisetMain.vue
@@ -65,26 +65,25 @@
           </v-icon>
           View Data
         </v-btn>
+        <v-btn
+          text
+          @click="$emit('edit')"
+        >
+          <v-icon
+            color="primary"
+            class="mr-2"
+          >
+            {{ metadataButtonIcon }}
+          </v-icon>
+          {{ metadataButtonText }}
+        </v-btn>
         <template v-if="!DJANGO_API || publishDandiset.version == 'draft'">
           <v-tooltip
             left
             :disabled="editDisabledMessage === null"
           >
             <template v-slot:activator="{ on }">
               <div v-on="on">
-                <v-btn
-                  text
-                  :disabled="editDisabledMessage !== null"
-                  @click="$emit('edit')"
-                >
-                  <v-icon
-                    color="primary"
-                    class="mr-2"
-                  >
-                    mdi-pencil
-                  </v-icon>
-                  Edit metadata
-                </v-btn>
                 <!-- TODO for now only admins can publish -->
                 <v-btn
                   v-if="DJANGO_API"
@@ -176,6 +175,10 @@ export default {
       type: Object,
       required: true,
     },
+    userCanModifyDandiset: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -220,6 +223,12 @@ export default {
 
       return null;
     },
+    metadataButtonText() {
+      return this.userCanModifyDandiset ? 'Edit metadata' : 'View metadata';
+    },
+    metadataButtonIcon() {
+      return this.userCanModifyDandiset ? 'mdi-pencil' : 'mdi-eye';
+    },
     fileBrowserLink() {
       if (toggles.DJANGO_API) {
         const { version } = this;
@@ -249,19 +258,6 @@ export default {
     ...mapGetters('dandiset', ['version']),
   },
   asyncComputed: {
-    userCanModifyDandiset: {
-      async get() {
-        if (this.user.admin) {
-          return true;
-        }
-
-        const { identifier } = this.publishDandiset.meta.dandiset;
-        const { data: owners } = await publishRest.owners(identifier);
-        const userExists = owners.find((owner) => owner.username === this.user.username);
-        return !!userExists;
-      },
-      default: false,
-    },
     lockOwner: {
       async get() {
         if (toggles.DJANGO_API) {

diff --git a/web/src/views/DandisetLandingView/Meditor.vue b/web/src/views/DandisetLandingView/Meditor.vue
@@ -68,6 +68,7 @@
                   color="primary"
                   v-on="on"
                   @click="save"
+                  :disabled="readonly"
                 >
                   <v-icon>
                     mdi-content-save
@@ -180,10 +181,6 @@ function renderField(fieldSchema: JSONSchema7) {
   return true;
 }
 
-const CommonVJSFOptions = {
-  initialValidation: 'all',
-};
-
 export default defineComponent({
   name: 'Meditor',
   components: { VJsf },
@@ -196,6 +193,10 @@ export default defineComponent({
       type: Object as PropType<DandiModel>,
       required: true,
     },
+    readonly: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props, ctx) {
     // TODO: Replace once direct-vuex is added
@@ -228,6 +229,10 @@ export default defineComponent({
       return undefined;
     }
 
+    const CommonVJSFOptions = computed(() => ({
+      initialValidation: 'all',
+      disableAll: props.readonly,
+    }));
     const publishDandiset = computed(() => store.state.dandiset.publishDandiset);
     const id = computed(() => publishDandiset.value?.meta.dandiset.identifier || null);
     function setDandiset(payload: any) {