finish memos cover
This commit is contained in:
@@ -1,33 +1,51 @@
|
||||
<template>
|
||||
<div class="memo-edit p-2">
|
||||
<div class="flex-between mb-1">
|
||||
<router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
|
||||
</div>
|
||||
<form @submit.prevent="submitForm">
|
||||
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
|
||||
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
|
||||
<div class="flex-end mt-1">
|
||||
<button class="btn-primary">Save</button>
|
||||
<div class="memo-edit">
|
||||
<div class="relative">
|
||||
<UploadableImage
|
||||
v-if="!loading"
|
||||
:image-width=1500
|
||||
:image-height=500
|
||||
location="cover"
|
||||
:image="form.attributes.cover_image"
|
||||
:author="form.attributes.posted_by"
|
||||
:id="form.memo_id"
|
||||
:model="form.type"
|
||||
classes="cover"
|
||||
:alt="form.name"/>
|
||||
<div class="flex-between ml-2 mt-1 absolute t-0">
|
||||
<router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<form @submit.prevent="submitForm">
|
||||
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
|
||||
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
|
||||
<div class="flex-end mt-1">
|
||||
<button class="btn-primary">Save</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InputField from "../../components/InputField";
|
||||
import TextAreaField from "../../components/TextAreaField";
|
||||
import UploadableImage from "../../components/UploadableImage";
|
||||
|
||||
export default {
|
||||
name: "MemoEdit",
|
||||
components: {
|
||||
InputField, TextAreaField
|
||||
InputField, TextAreaField, UploadableImage
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
form: {
|
||||
'name': '',
|
||||
'memo': '',
|
||||
'attributes': {}
|
||||
},
|
||||
errors: null,
|
||||
loading: true,
|
||||
|
||||
@@ -10,8 +10,11 @@
|
||||
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
|
||||
</div>
|
||||
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
|
||||
<h1>{{ memo.data.name }}</h1>
|
||||
<div class="memo-date">{{ memo.data.last_updated }}</div>
|
||||
<div>
|
||||
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
|
||||
<h1 class="p-1">{{ memo.data.name }}</h1>
|
||||
</div>
|
||||
<div class="memo-date p-1">{{ memo.data.last_updated }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,39 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<div>
|
||||
<Loader v-if="loading" />
|
||||
<div v-else>
|
||||
<div class="flex-between flex-center mb-1 relative">
|
||||
<router-link to="/memos/" class="btn">< Back</router-link>
|
||||
<div v-if="modal" class="modal-container" @click="modal = ! modal">
|
||||
<div class="modal">
|
||||
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
|
||||
<div class="flex-center m-1 mt-2">
|
||||
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
|
||||
<button class="btn-alert" @click="destroy"> Delete</button>
|
||||
<div class="relative">
|
||||
<img
|
||||
v-if="!loading"
|
||||
class="cover"
|
||||
:src="memo.attributes.cover_image.data.attributes.path"
|
||||
/>
|
||||
<div class="flex-col flex-between absolute memo-cover">
|
||||
<div class="flex-between px-2 py-1">
|
||||
<router-link to="/memos/" class="btn-secondary">< Back</router-link>
|
||||
<div v-if="modal" class="modal-container" @click="modal = ! modal">
|
||||
<div class="modal">
|
||||
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
|
||||
<div class="flex-center m-1 mt-2">
|
||||
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
|
||||
<button class="btn-alert" @click="destroy"> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-middle">
|
||||
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
|
||||
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-middle">
|
||||
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
|
||||
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
|
||||
<h1 class="memo-title flex-center">{{ memo.name }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <TagBox :memo="memo" />-->
|
||||
<h1 class="memo-title flex-center">{{ memo.name }}</h1>
|
||||
<p class="memo-style pt-1" v-html="memoMarkdown"></p>
|
||||
<div class="memo-change">@last update : {{ memo.last_updated }}</div>
|
||||
<div class="p-2">
|
||||
|
||||
<p class="memo-style pt-1" v-html="memoMarkdown"></p>
|
||||
<div class="memo-change">@last update : {{ memo.last_updated }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user