Allow remake to make new groups; catch a few bugs

CHANGELOG.md

@@ -8,9 +8,14 @@ and this project adheres to
 
 ## UNRELEASED
 
+### Changed
+
+- Allow Remake to create new groups
+
 ### Fixed
 
 - Don't pass nonexistant data to state handlers
+- Don't allow Remaking to an existing group as if it were new
 
 ## [1.1.1-beta] - 2022-08-30
 

interface/src/components/RemakeKnown.vue

@@ -1,11 +1,7 @@
 <template>
   <v-dialog v-model="remakeOpen">
     <template v-slot:activator="{ props }">
-      <v-btn
-        v-bind="props" color="success"
-        text="white"
-        @click="openRemake"
-      >
+      <v-btn v-bind="props" color="success" text="white" @click="openRemake">
         <v-icon start>mdi-content-duplicate</v-icon>
         remake</v-btn
       >
@@ -25,7 +21,6 @@
       </v-card-title>
 
       <v-card-text>
-
         <hr class="tw-my-4" />
 
         <div>
@@ -40,60 +35,97 @@
                   >mdi-help-circle-outline</v-icon
                 >
               </template>
-              <span>The resource will be re-created with a new name (which can be the same as the old name) in the group of your choosing.</span>
+              <span
+                >The resource will be re-created with a new name (which can be
+                the same as the old name) in the group of your choosing.</span
+              >
             </v-tooltip>
           </div>
           <v-form ref="form" v-model="formValid">
-              <v-row>
-                <v-col cols="12">
-                  <v-select
-                    :items="groupOptions"
-                    label="New group"
-                    required
-                    v-model="newGroup"
-                    :loading="adminPending"
-                    :disabled="groupOptions.length === 0"
-                    :rules="[(v) => !!v || 'Must choose a group']"
-                    persistent-hint
-                    :hint="groupOptions.length === 0 ? 'You aren\'t the admin of any groups' : ''"
-                    hide-details="auto"
-                  />
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col cols="12">
-                  <v-text-field
-                    label="New resource name"
-                    v-model="newResourceName"
-                    :rules="nameRules"
-                    hide-details="auto"
-                  />
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col cols="12">
-                  <div class="tw-mb-1">
-                    <v-btn
-                      color="success"
-                      text="white"
-                      @click="remake"
-                      :loading="remakePending"
-                      :disabled="!formValid"
+            <v-row>
+              <v-col cols="12">
+                <v-select
+                  :items="groupOptions"
+                  label="Import to existing group"
+                  v-model="existingGroupForResource"
+                  :loading="adminPending"
+                  :disabled="groupOptions.length === 0"
+                  persistent-hint
+                  clearable
+                  :item-title="item => `${ item.entity } - ${ item.name }`"
+                  item-value="name"
+                  return-object
+                  :hint="
+                    groupOptions.length === 0
+                      ? 'You aren\'t the admin of any groups'
+                      : ''
+                  "
+                  hide-details="auto"
+                  :rules="existingGroupRules"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="newGroupName"
+                  label="Import to new group"
+                  :rules="newGroupRules.concat(nameRules)"
+                  hint="Peat will create this new group for you"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  label="New resource name"
+                  v-model="newResourceName"
+                  :rules="resourceNamePresenceRules.concat(nameRules)"
+                  required
+                  hide-details="auto"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <div class="tw-mb-1">
+                  <v-btn
+                    color="success"
+                    text="white"
+                    @click="remake"
+                    :loading="remakePending"
+                    :disabled="!formValid"
                     >Remake {{ ship }}'s {{ resource }}</v-btn
-                    >
-                  </div>
-                  <div v-if="remakePending">
-                    <v-alert type="info" variant="tonal">
-                      Remake has started. You might notice your ship hanging while this completes... You can close this page - or watch.
-                    </v-alert>
-                  </div>
-                  <div v-if="showDone">
-                    <v-alert type="success" variant="tonal">
-                      Remake complete! Check Groups.
-                    </v-alert>
-                  </div>
-                </v-col>
-              </v-row>
+                  >
+                </div>
+                <div class="tw-my-2" v-if="formValid">
+                  <span
+                    >Import
+                    {{
+                      `as ${chosenGroup != "" ? `"${newResourceName}"` : ""}`
+                    }}
+                    {{
+                      `${
+                        chosenGroup != ""
+                          ? "under " + chosenGroup + " group"
+                          : ""
+                      }`
+                    }}</span
+                  >
+                </div>
+                <div v-if="remakePending">
+                  <v-alert type="info" variant="tonal">
+                    Remake has started. You might notice your ship hanging while
+                    this completes... You can close this page - or watch.
+                  </v-alert>
+                </div>
+                <div v-if="showDone">
+                  <v-alert type="success" variant="tonal">
+                    Remake complete! Check Groups.
+                  </v-alert>
+                </div>
+              </v-col>
+            </v-row>
           </v-form>
         </div>
       </v-card-text>
@@ -115,80 +147,148 @@ export default defineComponent({
       remakeOpen: false,
       remakePending: false,
       showDone: false,
-      newGroup: '',
-      newResourceName: '',
+      newGroupName: "",
+      newResourceName: "",
+      existingGroupForResource: null,
       adminPending: false,
+      resourceNamePresenceRules: [
+        (v: string) => !!v || "Resource name is required",
+      ],
       nameRules: [
-        (v: string) => !!v || 'Resource name is required',
-        (v: string) => /^[\w-]+$/.test(v) || 'Must use kebab-case-for-name; no special characters',
-        (v: string) => /^[a-zA-Z].*$/.test(v) || 'First character must be a letter'
+        (v: string) =>
+          (!v || /^[\w-]+$/.test(v)) ||
+          "Must use kebab-case-for-name; no special characters",
+        (v: string) =>
+          (!v || /^[a-zA-Z].*$/.test(v)) || "First character must be a letter",
       ],
     };
   },
 
   watch: {
     remakeOpen(val: boolean) {
       if (val && this.groupOptions.length === 0) {
-        this.getAdmin()
+        this.getAdmin();
       }
-      if (!val) { // closing
+      if (!val) {
+        // closing
         // reset things
         this.remakePending = false;
         this.showDone = false;
-        this.newGroup = '';
-        this.newResourceName = '';
+        this.newGroupName = "";
+        this.newResourceName = "";
+      }
+    },
+    newGroupName(val: string) {
+      if (val) {
+        this.existingGroupForResource = null;
+        this.validateForm();
       }
     },
-    newGroup(val: string) {
+    existingGroupForResource(val: string) {
       if (val) {
-        this.validateForm()
+        this.newGroupName = "";
+        this.validateForm();
       }
     },
+    newResourceName(val: string) {
+      this.validateForm();
+    },
   },
 
   computed: {
     ...mapState("peat", ["admin"]),
     groupOptions() {
-      return this.admin.map((a: Admin) => a.name)
-    }
+      return this.admin.slice()
+    },
+
+    chosenGroup() {
+      if (this.existingGroupForResource) {
+        return this.existingGroupAsString(this.existingGroupForResource);
+      }
+      if (this.newGroupName !== "") {
+        return this.newGroupName;
+      }
+      return "";
+    },
+
+    existingGroupRules() {
+      if (this.chosenGroup !== "") {
+        return [true];
+      }
+      if (!this.existingGroupForResource) {
+        return ["Choose an existing group or create a new one"];
+      }
+      return [true];
+    },
+
+    newGroupRules() {
+      if (this.newGroupName === "" && !this.existingGroupForResource) {
+        return ["Enter a group name to create a new group for this import"];
+      }
+      if (this.groupOptions.map(g => g.name).includes(this.newGroupName)) {
+        return ["You already have a group with this name"];
+      }
+      return [true];
+    },
   },
 
   mounted() {
-    this.newResourceName = this.resource
+    // this.newResourceName = this.resource;
   },
 
   methods: {
     validateForm() {
-      this.$refs.form.validate()
+      console.log('grus ', this.groupOptions.map(g => g.name))
+      this.formValid = false;
+      return
+      this.$refs.form.validate();
+    },
+
+    existingGroupAsString(entityNamePair) {
+      return `${ entityNamePair.entity } - ${ entityNamePair.name }`
     },
 
     remake() {
-      this.validateForm()
+      this.validateForm();
 
       if (!this.formValid) {
-        return
+        return;
+      }
+
+      let sanitizedGroupName = '';
+      if (
+          this.existingGroupForResource &&
+          this.existingGroupForResource.hasOwnProperty("entity") &&
+          this.existingGroupForResource.hasOwnProperty("name")
+        ) {
+        sanitizedGroupName = `${ this.existingGroupForResource.entity } ${ this.existingGroupForResource.name }`
+      } else {
+        sanitizedGroupName = `${ this.chosenGroup }`
       }
+      console.log('san ', sanitizedGroupName)
 
       this.remakePending = true;
+
       const payload = {
-        group: `~${ window.ship } ${ this.newGroup }`,
-        'new-resource-name': this.newResourceName,
-        'remake-resource': `${ this.ship } ${ this.resource }`,
+        group: `${sanitizedGroupName}`,
+        "new-resource-name": this.newResourceName,
+        "remake-resource": `${this.ship} ${this.resource}`,
       };
-      this.$store.dispatch("peat/remakeResource", payload)
+      this.$store
+        .dispatch("peat/remakeResource", payload)
         .then((r) => {
-        this.showDone = true;
-      }).finally(() => {
-        this.remakePending = false;
-      });
+          this.showDone = true;
+        })
+        .finally(() => {
+          this.remakePending = false;
+        });
     },
 
     getAdmin() {
       this.adminPending = true;
-      this.$store.dispatch("peat/getAdmin")
-        .then((r) => {
-          this.adminPending = false;
-        })
+      this.$store.dispatch("peat/getAdmin").then((r) => {
+        this.adminPending = false;
+      });
     },
   },
 });

interface/src/store/ship.ts

@@ -40,6 +40,9 @@ export default {
           if ('saved' in data) {
             dispatch("peat/setSaved", data.saved, { root: true })
           }
+          if ('status' in data) {
+            console.log('status: ', data)
+          }
         },
         (subscriptionNumber: number) => {
           dispatch("addSubscription", {