got a bit of styling, add keep and add vault modals working

2022-08-04 10:38:52 -06:00
parent 34f93f289b
commit f6fa1022aa
15 changed files with 336 additions and 28 deletions
@@ -0,0 +1,75 @@
+ <template>
+  <div class="component">
+    <div class="modal fade" id="newKeepModal" tabindex="-1" aria-labelledby="newKeepModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="cardp p-3">
+            <div class="d-flex justify-content-end">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <h3 class="card-title">New Keep</h3>
+            <!-- <form> -->
+            <div class="mb-1">
+              <label for="keepTitle" class="form-label">Title</label>
+              <input type="text" id="keepTitle" name="keepTitle" v-model="name" placeholder="Title..."
+                class="form-control">
+            </div>
+            <div class="mb-1">
+              <label for="keepImg" class="form-label">Image URL</label>
+              <input type="text" id="keepImg" name="keepImg" v-model="img" placeholder="URL..." class="form-control">
+            </div>
+            <div class="mb-1">
+              <label for="vaultIsPrivate" class="form-check-label">Description</label>
+              <textarea name="keepDescription" id="keepDescription" v-model="description"
+                placeholder="Keep Description..." rows="5" class="form-control"></textarea>
+            </div>
+            <div class="mb-1">
+              <label for="keepTags" class="form-label">Tags</label>
+              <input type="text" id="keepTags" name="keepTags" v-model="img" placeholder="Tags..." class="form-control">
+            </div>
+            <button @click="createKeep()" class="btn btn-primary">Create</button>
+            <!-- </form> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+ 
+ <script>
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+import { vaultsService } from '../services/VaultsService'
+import { keepsService } from '../services/KeepsService'
+export default {
+  setup() {
+    return {
+      name: "",
+      img: "",
+      description: "",
+      tags: "",
+
+      async createKeep() {
+        let newKeep = {
+          name: this.name,
+          img: this.img,
+          description: this.description
+          // ,tags: this.tags
+        }
+        await keepsService.create(newKeep)
+
+        // reload vaults
+        // close modal
+      }
+    }
+  }
+}
+</script>
+ 
+ 
+ <style lang="scss" scoped>
+ </style>