enhancement: put password protect & allow download to more options

packages/nc-gui/components/project/spreadsheet/components/SpreadsheetNavDrawer.vue

@@ -388,59 +388,71 @@
             </v-icon>
           </div>
 
-          <v-switch
+          <v-expansion-panels v-model="advanceOptionsPanel" class="mx-auto" flat>
-            v-model="passwordProtect"
+            <v-expansion-panel>
-            dense
+              <v-expansion-panel-header hide-actions>
-            @change="onPasswordProtectChange"
+                <v-spacer />
-          >
+                <span class="grey--text caption">More Options <v-icon color="grey" small>
-            <template #label>
+                  mdi-chevron-{{ advanceOptionsPanel === 0 ? 'up' : 'down' }}
-              <!-- Restrict access with a password -->
+                </v-icon></span>
-              <span v-show="!passwordProtect" class="caption">
+              </v-expansion-panel-header>
-                {{ $t("msg.info.beforeEnablePwd") }}
+              <v-expansion-panel-content>
-              </span>
+                <v-checkbox
-              <!-- Access is password restricted -->
+                  v-model="passwordProtect"
-              <span v-show="passwordProtect" class="caption">
+                  class="caption"
-                {{ $t("msg.info.afterEnablePwd") }}
+                  :label="$t('msg.info.beforeEnablePwd')"
-              </span>
+                  hide-details
-            </template>
+                  dense
-          </v-switch>
+                  @change="onPasswordProtectChange"
-
+                />
-          <div
+                <div
-            v-if="passwordProtect"
+                  v-if="passwordProtect"
-            class="d-flex flex-column align-center justify-center"
+                  class="d-flex flex-column align-center justify-center"
-          >
-            <v-text-field
-              v-model="shareLink.password"
-              autocomplete="new-password"
-              browser-autocomplete="new-password"
-              class="password-field mr-2 caption"
-              style="max-width: 230px"
-              :type="showShareLinkPassword ? 'text' : 'password'"
-              :hint="$t('placeholder.password.enter')"
-              persistent-hint
-              dense
-              solo
-              flat
-            >
-              <template #append>
-                <v-icon
-                  small
-                  @click="showShareLinkPassword = !showShareLinkPassword"
                 >
-                  {{ showShareLinkPassword ? "visibility_off" : "visibility" }}
+                  <v-text-field
-                </v-icon>
+                    v-model="shareLink.password"
-              </template>
+                    autocomplete="new-password"
-            </v-text-field>
+                    browser-autocomplete="new-password"
-            <v-btn
+                    class="password-field mr-2 caption"
-              color="primary"
+                    style="max-width: 230px"
-              class="caption"
+                    :type="showShareLinkPassword ? 'text' : 'password'"
-              small
+                    :hint="$t('placeholder.password.enter')"
-              @click="saveShareLinkPassword"
+                    persistent-hint
-            >
+                    dense
-              <!-- Save password -->
+                    solo
-              {{ $t("placeholder.password.save") }}
+                    flat
-            </v-btn>
+                  >
-          </div>
+                    <template #append>
+                      <v-icon
+                        small
+                        @click="showShareLinkPassword = !showShareLinkPassword"
+                      >
+                        {{ showShareLinkPassword ? "visibility_off" : "visibility" }}
+                      </v-icon>
+                    </template>
+                  </v-text-field>
+                  <v-btn
+                    color="primary"
+                    class="caption"
+                    small
+                    @click="saveShareLinkPassword"
+                  >
+                    <!-- Save password -->
+                    {{ $t("placeholder.password.save") }}
+                  </v-btn>
+                </div>
+                <v-checkbox
+                  v-if="selectedView && selectedView.type === viewTypes.GRID"
+                  v-model="allowDownload"
+                  class="caption"
+                  label="Allow Download"
+                  hide-details
+                  dense
+                  @change="onAllowDownloadChange"
+                />
+              </v-expansion-panel-content>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </v-container>
       </v-card>
     </v-dialog>
@@ -497,6 +509,7 @@ export default {
     queryParams: Object
   },
   data: () => ({
+    advanceOptionsPanel: false,
     webhookSliderModal: false,
     codeSnippetModal: false,
     drag: false,
@@ -512,6 +525,7 @@ export default {
     searchQueryVal: '',
     showShareLinkPassword: false,
     passwordProtect: false,
+    allowDownload: true,
     sharedViewPassword: '',
     overAdvShieldIcon: false,
     overShieldIcon: false,
@@ -525,7 +539,7 @@ export default {
       [ViewTypes.GRID]: 'grid',
       [ViewTypes.FORM]: 'form',
       [ViewTypes.GALLERY]: 'gallery'
-    }
+    },
   }),
   computed: {
     isSharedBase() {
@@ -710,6 +724,9 @@ export default {
         this.saveShareLinkPassword()
       }
     },
+    onAllowDownloadChange() {
+      this.saveAllowDownload()
+    },
     async saveShareLinkPassword() {
       try {
         await this.$api.dbViewShare.update(this.shareLink.id, {
@@ -733,6 +750,23 @@ export default {
 
       this.$e('a:view:share:enable-pwd')
     },
+    async saveAllowDownload() {
+      try {
+        await this.$api.dbViewShare.update(this.shareLink.id, {
+          download: this.allowDownload
+        })
+        this.$toast.success('Successfully updated').goAway(3000)
+      } catch (e) {
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000)
+      }
+      if (this.allowDownload) {
+        this.$e('a:view:share:enable-download')
+      } else {
+        this.$e('a:view:share:disable-download')
+      }
+    },
     async loadViews() {
       // this.viewsList = await this.sqlOp(
       //   {
@@ -1012,4 +1046,7 @@ export default {
   opacity: 0.5;
   background: grey;
 }
+.mx-auto .v-expansion-panel{
+  background: var(--v-backgroundColor-base)
+}
 </style>