Env management

components/environments/addEnvironment.vue

@@ -0,0 +1,77 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">{{ $t("new_environment") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_environment')"
+            @keyup.enter="addNewEnvironment"
+          />
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="addNewEnvironment">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+
+export default {
+  props: {
+    show: Boolean
+  },
+  components: {
+    modal: () => import("../../components/modal")
+  },
+  data() {
+    return {
+      name: undefined
+    };
+  },
+  methods: {
+    addNewEnvironment() {
+      if (!this.$data.name) {
+        this.$toast.info($t("invalid_environment_name"));
+        return;
+      }
+      let newEnvironment = [{
+        name: this.$data.name,
+        variables: []
+      }]
+      this.$store.commit("postwoman/importAddEnvironments", newEnvironment);
+      this.$emit("hide-modal");
+    },
+    hideModal() {
+      this.$emit("hide-modal");
+    }
+  }
+};
+</script>

components/environments/editEnvironment.vue

@@ -0,0 +1,206 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">{{ $t("edit_environment") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="editingEnvironment.name"
+            @keyup.enter="saveEnvironment"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <label for="variableList">{{ $t("env_variable_list") }}</label>
+            <div>
+              <button
+                class="icon"
+                @click="clearContent($event)"
+                v-tooltip.bottom="$t('clear')"
+              >
+                <i class="material-icons">clear_all</i>
+              </button>
+            </div>
+          </div>
+          <textarea
+            id="variableList"
+            readonly
+            v-textarea-auto-height="variableString"
+            v-model="variableString"
+            :placeholder="$t('add_one_variable')"
+            rows="1"
+          ></textarea>
+        </li>
+      </ul>
+      <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
+        <li>
+          <input
+            :placeholder="$t('parameter_count', { count: index + 1 })"
+            :name="'param' + index"
+            :value="variable.key"
+            @change="
+                      $store.commit('postwoman/setVariableKey', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+            autofocus
+          />
+        </li>
+        <li>
+          <input
+            :placeholder="$t('value_count', { count: index + 1 })"
+            :name="'value' + index"
+            :value="variable.value"
+            @change="
+                      $store.commit('postwoman/setVariableValue', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+          />
+        </li>
+        <div>
+          <li>
+            <button
+              class="icon"
+              @click="removeEnvironmentVariable(index)"
+              v-tooltip.bottom="$t('delete')"
+              id="variable"
+            >
+              <i class="material-icons">delete</i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <ul>
+        <li>
+          <button class="icon" @click="addEnvironmentVariable">
+            <i class="material-icons">add</i>
+            <span>{{ $t("add_new") }}</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="saveEnvironment">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import textareaAutoHeight from "../../directives/textareaAutoHeight";
+
+export default {
+  directives: {
+    textareaAutoHeight
+  },
+  props: {
+    show: Boolean,
+    editingEnvironment: Object,
+    editingEnvironmentIndex: Number
+  },
+  components: {
+    modal: () => import("../../components/modal")
+  },
+  data() {
+    return {
+      name: undefined
+    };
+  },
+  watch: {
+    editingEnvironment: function(update) {
+      this.$store.commit("postwoman/setEditingEnvironment", this.$props.editingEnvironment);
+    }
+  },
+  computed: {
+    editingEnvCopy() {
+      return this.$store.state.postwoman.editingEnvironment
+    },
+    variableString() {
+      const result = this.editingEnvCopy.variables
+      return result === "" ? "" : JSON.stringify(result);
+    }
+  },
+  methods: {
+    clearContent(e) {
+      this.$store.commit("postwoman/removeVariables", [])
+      e.target.innerHTML = this.doneButton;
+      this.$toast.info(this.$t("cleared"), {
+        icon: "clear_all"
+      });
+      setTimeout(
+        () => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'),
+        1000
+      );
+    },
+    addEnvironmentVariable() {
+      let value = { key: "", value: "" }
+      this.$store.commit("postwoman/addVariable", value);
+    },
+    removeEnvironmentVariable(index) {
+      let variableIndex = index
+      const oldVariables = this.editingEnvCopy.variables.slice()
+      const newVariables = this.editingEnvCopy.variables.filter((variable, index) => variableIndex !== index)
+
+      this.$store.commit("postwoman/removeVariable", newVariables)
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.$store.commit("postwoman/removeVariable", oldVariables);
+            toastObject.remove();
+          }
+        }
+      });
+    },
+    saveEnvironment() {
+      if (!this.$data.name) {
+        this.$toast.info(this.$t("invalid_environment_name"));
+        return;
+      }
+      const environmentUpdated = {
+        ...this.editingEnvCopy,
+        name: this.$data.name
+      };
+      this.$store.commit("postwoman/saveEnvironment", {
+        environment: environmentUpdated,
+        environmentIndex: this.$props.editingEnvironmentIndex
+      });
+      this.$emit("hide-modal");
+    },
+    hideModal() {
+      this.$data.name = undefined
+      this.$emit("hide-modal");
+    }
+  }
+};
+</script>

components/environments/environment.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="flex-wrap">
+    <div>
+      <button
+        class="icon"
+        @click="$emit('select-environment')"
+        v-tooltip="$t('use_environment')"
+      >
+        <i class="material-icons">insert_drive_file</i>
+        <span>{{ environment.name }}</span>
+      </button>
+    </div>
+    <v-popover>
+      <button class="tooltip-target icon" v-tooltip="$t('more')">
+        <i class="material-icons">more_vert</i>
+      </button>
+      <template slot="popover">
+        <div>
+          <button
+            class="icon"
+            @click="$emit('edit-environment')"
+            v-close-popover
+          >
+            <i class="material-icons">create</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon" @click="removeEnvironment" v-close-popover>
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+ul {
+  display: flex;
+  flex-direction: column;
+}
+
+ul li {
+  display: flex;
+  padding-left: 16px;
+  border-left: 1px solid var(--brd-color);
+}
+</style>
+
+<script>
+export default {
+  props: {
+    environment: Object,
+    environmentIndex: Number
+  },
+  methods: {
+    removeEnvironment() {
+      if (!confirm("Are you sure you want to remove this environment?")) return;
+      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex);
+    }
+  }
+};
+</script>

components/environments/importExportEnvironment.vue

@@ -0,0 +1,170 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">Import / Export Environment</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+          <div class="flex-wrap">
+            <!-- TODO db syncing
+              button needs to be switchded to
+              :disabled=="!fb.currentUser"
+            -->
+            <span
+              v-tooltip="{
+                content: !fb.currentUser
+                  ? $t('login_first')
+                  : $t('replace_current')
+              }"
+            >
+              <button
+                :disabled="true"
+                class="icon"
+                @click="syncEnvironments"
+              >
+                <i class="material-icons">folder_shared</i>
+                <span>{{ $t("import_from_sync") }}</span>
+              </button>
+            </span>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToReplaceWith"
+              v-tooltip="$t('replace_current')"
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("replace_json") }}</span>
+              <input
+                type="file"
+                @change="replaceWithJSON"
+                style="display: none;"
+                ref="inputChooseFileToReplaceWith"
+                accept="application/json"
+              />
+            </button>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToImportFrom"
+              v-tooltip="$t('preserve_current')"
+            >
+              <i class="material-icons">folder_special</i>
+              <span>{{ $t("import_json") }}</span>
+              <input
+                type="file"
+                @change="importFromJSON"
+                style="display: none;"
+                ref="inputChooseFileToImportFrom"
+                accept="application/json"
+              />
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <textarea v-model="environmentJson" rows="8"></textarea>
+    </div>
+    <div slot="footer">
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button
+            class="icon primary"
+            @click="exportJSON"
+            v-tooltip="$t('download_file')"
+          >
+            {{ $t("export") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import { fb } from "../../functions/fb";
+
+export default {
+  data() {
+    return {
+      fb
+    };
+  },
+  props: {
+    show: Boolean
+  },
+  components: {
+    modal: () => import("../../components/modal")
+  },
+  computed: {
+    environmentJson() {
+      return JSON.stringify(this.$store.state.postwoman.environments, null, 2);
+    }
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal");
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click();
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click();
+    },
+    replaceWithJSON() {
+      let reader = new FileReader();
+      reader.onload = event => {
+        let content = event.target.result;
+        let environment = JSON.parse(content);
+        this.$store.commit("postwoman/replaceEnvironments", environment);
+      };
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+      this.fileImported();
+    },
+    importFromJSON() {
+      let reader = new FileReader();
+      reader.onload = event => {
+        let content = event.target.result;
+        let environment = JSON.parse(content);
+        this.$store.commit("postwoman/importAddEnvironments", environment);
+      };
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+      this.fileImported();
+    },
+    exportJSON() {
+      let text = this.environmentJson;
+      text = text.replace(/\n/g, "\r\n");
+      let blob = new Blob([text], {
+        type: "text/json"
+      });
+      let anchor = document.createElement("a");
+      anchor.download = "postwoman-environment.json";
+      anchor.href = window.URL.createObjectURL(blob);
+      anchor.target = "_blank";
+      anchor.style.display = "none";
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done"
+      });
+    },
+    syncEnvironments() {
+      // TODO
+    },
+    fileImported() {
+      this.$toast.info(this.$t("file_imported"), {
+        icon: "folder_shared"
+      });
+    }
+  }
+};
+</script>

components/environments/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <pw-section class="green" icon="history" :label="$t('environment')" ref="environment">
+    <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <editEnvironment
+      :show="showModalEdit"
+      :editingEnvironment="editingEnvironment"
+      :editingEnvironmentIndex="editingEnvironmentIndex"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <importExportEnvironment
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
+    />
+
+    <div class="flex-wrap">
+      <div>
+        <button class="icon" @click="displayModalAdd(true)">
+          <i class="material-icons">add</i>
+          <span>{{ $t("new") }}</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="displayModalImportExport(true)">
+          {{ $t("import_export") }}
+        </button>
+      </div>
+    </div>
+    <p v-if="environments.length === 0" class="info">
+      Create new environment
+    </p>
+    <virtual-list
+      class="virtual-list"
+      :class="{ filled: environments.length }"
+      :size="152"
+      :remain="Math.min(5, environments.length)"
+    >
+      <ul>
+        <li v-for="(environment, index) in environments" :key="environment.name">
+          <environment
+            :environmentIndex="index"
+            :environment="environment"
+            @edit-environment="editEnvironment(environment, index)"
+            @select-environment="$emit('use-environment', environment)"
+          />
+        </li>
+        <li v-if="environments.length === 0">
+          <label>Environments are empty</label>
+        </li>
+      </ul>
+    </virtual-list>
+  </pw-section>
+</template>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 276px);
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+<script>
+import environment from "./environment";
+// import { fb } from "../functions/fb";
+
+const updateOnLocalStorage = (propertyName, property) =>
+  window.localStorage.setItem(propertyName, JSON.stringify(property));
+
+export default {
+  components: {
+    environment,
+    "pw-section": () => import("../section"),
+    addEnvironment: () => import("./addEnvironment"),
+    editEnvironment: () => import("./editEnvironment"),
+    importExportEnvironment: () => import("./importExportEnvironment"),
+    VirtualList: () => import("vue-virtual-scroll-list")
+  },
+  data() {
+    return {
+      showModalImportExport: false,
+      showModalAdd: false,
+      showModalEdit: false,
+      editingEnvironment: undefined,
+      editingEnvironmentIndex: undefined,
+    };
+  },
+  computed: {
+    environments() {
+      return this.$store.state.postwoman.environments;
+    }
+  },
+  async mounted() {
+    this._keyListener = function(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.showModalImportExport = false;
+      }
+    };
+    document.addEventListener("keydown", this._keyListener.bind(this));
+  },
+  methods: {
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay;
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay;
+
+      if (!shouldDisplay) this.resetSelectedData();
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay;
+    },
+    editEnvironment(environment, environmentIndex) {
+      this.$data.editingEnvironment = environment;
+      this.$data.editingEnvironmentIndex = environmentIndex;
+      this.displayModalEdit(true);
+    },
+    resetSelectedData() {
+      this.$data.editingEnvironment = undefined;
+      this.$data.editingEnvironmentIndex = undefined;
+    },
+    syncEnvironments() {
+      // TODO
+    },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener);
+  }
+}
+}
+</script>