feat: implement EditPage

1 files changed, 183 insertions, 0 deletions

diff --git a/src/components/EditPage.vue b/src/components/EditPage.vue
new file mode 100644
index 0000000..ea47926
--- /dev/null
+++ b/src/components/EditPage.vue
@@ -0,0 +1,183 @@
+<template>
+  <v-switch
+    v-model="switchModel"
+    label="I want to create a new SubCard"
+  ></v-switch>
+
+  <v-form v-show="switchModel" lazy-validate ref="form1" v-model="valid1">
+    <v-text-field
+      v-model="title"
+      :counter="titleMaxLength"
+      :rules="titleRules"
+      label="Title"
+      required
+    ></v-text-field>
+
+    <v-textarea
+      auto-grow
+      clearable
+      clear-icon="mdi-close-circle"
+      outlined
+      name="textarea"
+      label="Content"
+      v-model="content"
+      :rules="contentRules"
+      required
+    ></v-textarea>
+
+    <v-btn
+      :disabled="!valid1"
+      variant="outlined"
+      class="mr-4"
+      @click="
+        validate(this.$refs.form1);
+        write(this.$refs.form1);
+      "
+    >
+      Save
+    </v-btn>
+
+    <v-btn variant="outlined" class="mr-4" @click="reset(this.$refs.form1)">
+      Reset Form
+    </v-btn>
+  </v-form>
+
+  <v-form v-show="!switchModel" lazy-validate ref="form2" v-model="valid2">
+    <v-select
+      v-model="select"
+      variant="outlined"
+      :items="items"
+      :rules="[(v) => !!v || 'Item is required']"
+      label="Item"
+      required
+    ></v-select>
+
+    <v-textarea
+      auto-grow
+      clearable
+      clear-icon="mdi-close-circle"
+      outlined
+      name="textarea"
+      label="Content"
+      v-model="content"
+      :rules="contentRules"
+      required
+    ></v-textarea>
+
+    <v-btn
+      :disabled="!valid2"
+      variant="outlined"
+      class="mr-4"
+      @click="
+        validate(this.$refs.form2);
+        write(this.$refs.form2);
+      "
+    >
+      Save
+    </v-btn>
+
+    <v-btn variant="outlined" class="mr-4" @click="reset(this.$refs.form2)">
+      Reset Validation
+    </v-btn>
+    <v-btn variant="outlined" class="mr-4" @click="deleteItem">
+      Delete Item
+    </v-btn>
+  </v-form>
+</template>
+
+<script>
+export default {
+  name: "EditPage",
+
+  emits: ["snackbarNotification"],
+
+  data: () => ({
+    valid1: true,
+    valid2: true,
+    title: "",
+    titleMaxLength: 15,
+    titleRules: [
+      (v) => !!v || "Title is required",
+      (v) => {
+        let titleMaxLength = 15;
+        return (
+          (v && v.length <= titleMaxLength) ||
+          `Title must be less than ${titleMaxLength} characters`
+        );
+      },
+    ],
+    content: "",
+    contentRules: [(v) => !!v || "Content is required"],
+    select: null,
+    items: [],
+    switchModel: false,
+    LSData: {},
+  }),
+
+  mounted() {
+    this.loadFromLS();
+    this.readAllItems();
+  },
+
+  methods: {
+    validate(form) {
+      form.validate();
+    },
+    reset(form) {
+      // Resets validation of all registered inputs without modifying their state.
+      // TODO: clearify this (do we need form.reset() ?)
+      form.resetValidation();
+    },
+    write(form) {
+      if (form == this.$refs.form1 && this.title in this.LSData) {
+        this.$emit("snackbarNotification", "Title already exists");
+        return;
+      }
+      if (form == this.$refs.form2) {
+        // Sync LSData(title) with form data
+        this.title = this.select;
+      }
+      this.LSData[this.title] = this.content;
+      this.writeToLS();
+      this.$emit("snackbarNotification", "Done!");
+      // Let's do a reset.
+      this.reset(form);
+      // Re-read all items.
+      this.readAllItems();
+    },
+    readAllItems() {
+      this.items = []; // Reset items list
+      for (let key in this.LSData) {
+        this.items.push(key);
+      }
+    },
+    deleteItem() {
+      delete this.LSData[this.select];
+      this.writeToLS();
+      // Re-read all items.
+      this.readAllItems();
+      this.$emit("snackbarNotification", "Item deleted");
+      this.reset(this.$refs.form2);
+    },
+
+    // LocalStorage
+    loadFromLS() {
+      this.LSData = JSON.parse(localStorage.getItem("LSData")) || this.LSData;
+    },
+    writeToLS() {
+      localStorage.setItem("LSData", JSON.stringify(this.LSData));
+    },
+    clearLS() {
+      localStorage.clear();
+    },
+  },
+
+  watch: {
+    // eslint-disable-next-line no-unused-vars
+    select(newSelected, _) {
+      // Load content whenever select changes
+      this.content = this.LSData[newSelected];
+    },
+  },
+};
+</script>