[Create/edit survey] Allow organizers to control whether data collectors can see each other's data (#2216)

Author: rfontanarosa

web/src/app/components/data-visibility-control/data-visibility-control.component.html

@@ -0,0 +1,23 @@
+<!--
+  Copyright 2025 The Ground Authors.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<div class="data-visibility-control-container">
+  <mat-slide-toggle
+    [checked]="selectedDataVisibility === SurveyDataVisibility.ALL_SURVEY_PARTICIPANTS"
+    (change)="changeDataVisibility($event)"
+  >
+  </mat-slide-toggle>
+</div>

web/src/app/components/data-visibility-control/data-visibility-control.component.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2025 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component} from '@angular/core';
+import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {Subscription} from 'rxjs';
+
+import {Survey, SurveyDataVisibility} from 'app/models/survey.model';
+import {AuthService} from 'app/services/auth/auth.service';
+import {DraftSurveyService} from 'app/services/draft-survey/draft-survey.service';
+
+@Component({
+  selector: 'ground-data-visibility-control',
+  templateUrl: './data-visibility-control.component.html',
+})
+export class DataVisibilityControlComponent {
+  private subscription = new Subscription();
+
+  selectedDataVisibility!: SurveyDataVisibility;
+
+  SurveyDataVisibility = SurveyDataVisibility;
+
+  constructor(
+    readonly authService: AuthService,
+    readonly draftSurveyService: DraftSurveyService
+  ) {
+    this.subscription.add(
+      this.draftSurveyService
+        .getSurvey$()
+        .subscribe(survey => this.onSurveyLoaded(survey))
+    );
+  }
+
+  private async onSurveyLoaded(survey: Survey): Promise<void> {
+    this.selectedDataVisibility =
+      survey.dataVisibility || SurveyDataVisibility.CONTRIBUTOR_AND_ORGANIZERS;
+  }
+
+  changeDataVisibility(event: MatSlideToggleChange) {
+    const dataVisibility = event.checked
+      ? SurveyDataVisibility.ALL_SURVEY_PARTICIPANTS
+      : SurveyDataVisibility.CONTRIBUTOR_AND_ORGANIZERS;
+
+    this.selectedDataVisibility = dataVisibility;
+
+    this.draftSurveyService.updateDataVisibility(dataVisibility);
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}

web/src/app/components/data-visibility-control/data-visibility-control.module.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright 2025 The Ground Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+
+import {DataVisibilityControlComponent} from './data-visibility-control.component';
+
+@NgModule({
+  declarations: [DataVisibilityControlComponent],
+  imports: [CommonModule, MatSlideToggleModule],
+  exports: [DataVisibilityControlComponent],
+})
+export class DataVisibilityControlModule {}

web/src/app/components/general-access-control/_general-access-control.component-theme.scss

@@ -18,29 +18,33 @@
 @use '@angular/material' as mat;
 
 @mixin color($theme) {
-  .general-access-select {
-    color: mat.get-theme-color($theme, neutral, 10);
-  }
-
-  .general-access-description {
-    color: mat.get-theme-color($theme, neutral-variant, 30);
-  }
-
-  .general-access-icon {
-    background-color: mat.get-theme-color($theme, neutral-variant, 90);
+  .general-access-control-container {
+    .general-access-select {
+      color: mat.get-theme-color($theme, neutral, 10);
+    }
+
+    .general-access-description {
+      color: mat.get-theme-color($theme, neutral-variant, 30);
+    }
+
+    .general-access-icon {
+      background-color: mat.get-theme-color($theme, neutral-variant, 90);
+    }
   }
 }
 
 
 @mixin typography($theme) {
-  .general-access-select {
-    font: mat.get-theme-typography($theme, body-medium, font);
-    font-weight: 600;
-  }
-
-  .general-access-description {
-    font: mat.get-theme-typography($theme, body-small, font);
-    font-weight: 500;
+  .general-access-control-container {
+    .general-access-select {
+      font: mat.get-theme-typography($theme, body-medium, font);
+      font-weight: 600;
+    }
+
+    .general-access-description {
+      font: mat.get-theme-typography($theme, body-small, font);
+      font-weight: 500;
+    }
   }
 }
 

web/src/app/components/share-survey/_share-survey.component-theme.scss

@@ -22,6 +22,10 @@
     .mat-mdc-card {
       --mdc-elevated-card-container-elevation: 0;
       border: 1px solid mat.get-theme-color($theme, neutral, 90);
+
+      .mat-mdc-card-content {
+        color: mat.get-theme-color($theme, neutral-variant, 30);
+      }
     }
 
     .mdc-button {

web/src/app/components/share-survey/share-survey.component.html

@@ -15,19 +15,15 @@
 -->
 
 <div class="share-survey-container">
-  <mat-card class="card-with-button">
-    <div class="relative-container">
-      <div class="positioned-button">
-        <button class="share-survey-button" mat-flat-button (click)="openShareDialog()">
-          <mat-icon class="material-symbols-outlined">add</mat-icon>
-
-          <span>Add participants</span>
-        </button>
-      </div>
-    </div>
-
+  <mat-card>
     <mat-card-header>
       <mat-card-title>People with access</mat-card-title>
+
+      <button class="share-survey-button" mat-flat-button (click)="openShareDialog()">
+        <mat-icon class="material-symbols-outlined">add</mat-icon>
+
+        <span>Add participants</span>
+      </button>
     </mat-card-header>
 
     <mat-card-content>
@@ -44,4 +40,16 @@
       <ground-general-access-control></ground-general-access-control>
     </mat-card-content>
   </mat-card>
+
+  <mat-card>
+    <ground-data-visibility-control class="floating-button"></ground-data-visibility-control>
+
+    <mat-card-header>
+      <mat-card-title>Data visibility</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <div>Allow data collectors to see each others' data</div>
+    </mat-card-content>
+  </mat-card>
 </div>

web/src/app/components/share-survey/share-survey.component.scss

@@ -20,19 +20,16 @@
   gap: 16px;
 
   .mat-mdc-card {
-    &.card-with-button {
-      .relative-container {
-        position: relative;
-      }
-
-      .positioned-button {
-        position: absolute;
-        right: 24px;
-        top: 24px;
-      }
+    .floating-button {
+      position: absolute;
+      top: 34px;
+      right: 24px;
     }
 
     .mat-mdc-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       padding: 24px 24px 0;
     }
 

web/src/app/components/share-survey/share-survey.module.ts

@@ -27,12 +27,14 @@ import {ShareDialogModule} from 'app/components/share-dialog/share-dialog.module
 import {ShareListModule} from 'app/components/share-list/share-list.module';
 
 import {ShareSurveyComponent} from './share-survey.component';
+import {DataVisibilityControlModule} from '../data-visibility-control/data-visibility-control.module';
 import {GeneralAccessControlModule} from '../general-access-control/general-access-control.module';
 
 @NgModule({
   declarations: [ShareSurveyComponent],
   imports: [
     CommonModule,
+    DataVisibilityControlModule,
     FormsModule,
     ReactiveFormsModule,
     GeneralAccessControlModule,

web/src/app/pages/edit-survey/edit-details/edit-details.component.html

@@ -48,13 +48,11 @@
     </mat-card-content>
   </mat-card>
 
-  <mat-card class="card-with-button">
-    <div class="relative-container">
-      <div class="positioned-button">
-        <button class="delete-survey-button" mat-stroked-button (click)="openDeleteSurveyDialog()">
-          <span>Delete survey</span>
-        </button>
-      </div>
+  <mat-card>
+    <div class="floating-button">
+      <button class="delete-survey-button" mat-stroked-button (click)="openDeleteSurveyDialog()">
+        <span>Delete survey</span>
+      </button>
     </div>
 
     <mat-card-header>

web/src/app/pages/edit-survey/edit-details/edit-details.component.scss

@@ -20,16 +20,10 @@
   gap: 16px;
 
   .mat-mdc-card {
-    &.card-with-button {
-      .relative-container {
-        position: relative;
-      }
-
-      .positioned-button {
-        position: absolute;
-        right: 24px;
-        top: 24px;
-      }
+    .floating-button {
+      position: absolute;
+      top: 34px;
+      right: 24px;
     }
 
     .mat-mdc-card-header {

web/src/app/services/draft-survey/draft-survey.service.ts

@@ -23,6 +23,7 @@ import {Role} from 'app/models/role.model';
 import {
   DataSharingType,
   Survey,
+  SurveyDataVisibility,
   SurveyGeneralAccess,
   SurveyState,
 } from 'app/models/survey.model';
@@ -140,6 +141,14 @@ export class DraftSurveyService {
     this.dirty = true;
   }
 
+  updateDataVisibility(dataVisibility: SurveyDataVisibility): void {
+    const currentSurvey = this.survey$.getValue();
+
+    this.survey$.next(currentSurvey.copyWith({dataVisibility}));
+
+    this.dirty = true;
+  }
+
   updateDataSharingTerms(type: DataSharingType, customText?: string): void {
     const currentSurvey = this.survey$.getValue();