グループ外NGのときorグループ外NGに変更するときにwarningを出す

src/components/event/EventFormBase.vue

@@ -46,7 +46,7 @@
       </v-stepper-content>
 
       <v-stepper-content step="3">
-        <event-form-summary v-bind="{ ...summary, content }" />
+        <event-form-summary v-bind="{ ...summary, content, isEdit: isEdit }" />
         <form-back-button class="mr-2" @click="step = 2">
           Back
         </form-back-button>
@@ -108,6 +108,9 @@ enum TimeAndPlaceFormTab {
   },
 })
 export default class EventFormBase extends Vue {
+  @Prop({ type: Boolean, required: true })
+  isEdit!: boolean
+
   @Prop({ type: Object })
   event!: EventInput | null | undefined
 

src/components/event/EventFormSummary.vue

@@ -24,6 +24,16 @@
         <v-icon :color="openIcon.color" large>{{ openIcon.icon }}</v-icon>
         <span class="text-h6 ml-2">{{ openString }}</span>
       </SummaryItemText>
+      <v-alert
+        v-if="!open && isEdit && openChanged()"
+        border="left"
+        colored-border
+        type="warning"
+        elevation="1"
+        class="mt-3"
+      >
+        グループ外の参加者を許可しない場合、既に登録されているグループ外の参加者の参加情報は削除されます。
+      </v-alert>
     </SummaryItem>
     <SummaryItem>
       <SummaryItemCaption>Date</SummaryItemCaption>
@@ -148,8 +158,12 @@ export default class EventFormSummary extends Vue {
   @Prop({ type: Boolean, required: true })
   sharedRoom!: boolean
 
+  @Prop({ type: Boolean, required: true })
+  isEdit!: boolean
+
   page: number = 1
   inviteesPerPage: number = 6
+  originalOpen: boolean = null!
 
   get sharedRoomString(): string {
     return this.sharedRoom ? '部屋の共用可能' : '部屋の共用不可能'
@@ -193,5 +207,13 @@ export default class EventFormSummary extends Vue {
       this.page * this.inviteesPerPage
     )
   }
+
+  openChanged(): boolean {
+    return this.originalOpen !== this.open
+  }
+
+  created() {
+    this.originalOpen = this.open
+  }
 }
 </script>

src/pages/EventEdit.vue

@@ -9,7 +9,11 @@
       </span>
     </template>
     <template v-else>
-      <event-form-base class="mb-5" :event="event" @submit="submit" />
+      <event-form-base
+        class="mb-5"
+        v-bind="{ event, isEdit: true }"
+        @submit="submit"
+      />
 
       <v-card class="px-5 pt-5 pb-3">
         <span class="headline mr-3"> Delete this event </span>

src/pages/EventNew.vue

@@ -3,7 +3,11 @@
     <progress-circular v-if="status === 'loading'" />
     <load-failed-text v-else-if="status === 'error'" />
     <template v-else>
-      <event-form-base :event="event" @submit="submit" />
+      <event-form-base
+        class="mb-5"
+        v-bind="{ event, isEdit: false }"
+        @submit="submit"
+      />
     </template>
   </v-container>
 </template>