init

src/components/PagebuilderTemplateSave.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="form-group mb-3">
+      <label
+        v-if="id < 1"
+        class="col-4"
+        >Tworzysz nowy szablon</label
+      >
+      <label
+        v-if="id > 0"
+        class="col-4"
+        >Nadpiszesz istniejacy szablon</label
+      >
+      <div class="col-8">
+        <b
+          v-if="id > 0"
+          class=""
+          >{{ name2 }}</b
+        >
+      </div>
+    </div>
+    <div class="form form-group mb-3">
+      <label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
+      <select
+        v-model="itemselected"
+        @change="changeSelect"
+        class="form-control"
+      >
+        <option :value="{ new: 1 }">Stwórz nowy szablon</option>
+        <option
+          :key="ii"
+          v-for="(item, ii) in items"
+          :value="item"
+        >
+          Nadpisz: {{ item.name }}
+        </option>
+      </select>
+    </div>
+    <div v-show="itemselected.new == 1">
+      <div class="form form-group mb-3">
+        <label class="w-100">Nazwa szablonu</label
+        ><input
+          @change="change"
+          class="form-control"
+          type="text"
+          v-model="name"
+        />
+      </div>
+      <div class="form form-group mb-3">
+        <label class="w-100">Opis</label
+        ><input
+          @change="change"
+          class="form-control"
+          type="text"
+          v-model="description"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  created() {
+    this.getPost();
+  },
+  data: function () {
+    return {
+      items: [],
+      itemselected: { new: 1 },
+      name: "",
+      description: "",
+      id: 0,
+    };
+  },
+  methods: {
+    change() {
+      this.$emit("update:modelValue", {
+        id: this.id,
+        name: this.name,
+        description: this.description,
+      });
+    },
+    changeSelect() {
+      this.id = this.itemselected.id;
+      this.name = this.itemselected.name;
+      this.name2 = this.itemselected.naem;
+      this.description = this.itemselected.description;
+      this.change();
+    },
+    getPost() {
+      if (this.$pagebuilder.axios) {
+        this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
+          this.items = response.data.data;
+        });
+      } else {
+        console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
+      }
+    },
+  },
+};
+</script>