BountyForm.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">

                    <div class="panel-heading">Add bounty</div>
                    <div class="panel-body">
                        <a :href="back_url" class="btn btn-default">Back</a>
                    </div>
                    <div class="panel-body">
                        <div v-if="session('status')" class="alert alert-success">
                            {{ session('status') }}
                        </div>
                        <form :action="action" method="post">
                            <div class="form-group">
                                <label for="name" class="control-label">Campaign name</label>
                                <input id="name" type="text" class="form-control"
                                       v-model="values.name"
                                       name="name"
                                       required>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="platform_code">Platform</label>
                                <select required class="form-control"
                                        v-model="values.platform_code"
                                        name="platform_code"
                                        id="platform_code">
                                    <option disabled :selected="values.platform_code?'':'selected'" value="">Select platform</option>
                                    <option v-for="platform in platforms"
                                            :selected="platform.code==values.platform_code?'selected':''"
                                            :value="platform.code">{{platform.title}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="target_account" class="control-label">Target account</label>
                                <input id="target_account" type="text" class="form-control"
                                       v-model="values.target_account"
                                       name="target_account"
                                       >
                            </div>
                            <div class="form-group">
                                <label for="start_date">Start date</label>
                                <input type="date" id="start_date" class="form-control"
                                       v-model="values.start_date"
                                       name="start_date"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="end_date">End date</label>
                                <input type="date" id="end_date" class="form-control"
                                       v-model="values.end_date"
                                       name="end_date"
                                       required>
                            </div>

                            <div class="form-group">
                                <label for="likes_per_day">Max likes per day</label>
                                <input type="number" id="likes_per_day" class="form-control"
                                       v-model="values.likes_per_day"
                                       name="likes_per_day"
                                       min="0"
                                       required>
                            </div>
                            <hr>

                            <div class="form-group">
                                <label for="reposts_per_day">Max posts per day</label>
                                <input type="number" id="posts_per_day" class="form-control"
                                       v-model="values.posts_per_day"
                                       name="posts_per_day"
                                       min="0"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="reposts_per_week">Max posts per week</label>
                                <input type="number" id="posts_per_week" class="form-control"
                                       v-model="values.posts_per_week"
                                       name="posts_per_week"
                                       min="0"
                                       required>
                            </div>
                            <div v-if="parseInt(values.posts_per_day) && parseInt(values.posts_per_week)" class="form-group">
                                <a href="javascript:void(0)" @click="show_posts = !show_posts">Customize posts</a>
                                <div v-show="show_posts"
                                     class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="b-margin-10 with-after"
                                             v-for="(post, index) in posts"
                                             :class="post.length > max_text_length ? 'error':''"
                                             :data-after="post.length+'/'+max_text_length">
                                            <textarea class="form-control b-margin-10 minimal-textarea"
                                                      v-model="posts[index]"
                                                      :name="'posts['+index+']'"
                                            ></textarea>
                                            <div @click="posts.splice(index,1)"
                                                 class="delete">&times;</div>
                                        </div>

                                        <button class="btn btn-primary"
                                                v-if="posts.length < values.posts_per_day*values.posts_per_week"
                                                @click.prevent="posts.push(default_text)" >Add text template</button>
                                    </div>
                                </div>
                            </div>
                            <hr>

                            <div class="form-group">
                                <label for="reposts_per_day">Max reposts per day</label>
                                <input type="number" id="reposts_per_day" class="form-control"
                                       v-model="values.reposts_per_day"
                                       name="reposts_per_day"
                                       min="0"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="comments_per_day">Max comments per day</label>
                                <input type="number" id="comments_per_day" class="form-control"
                                       v-model="values.comments_per_day"
                                       name="comments_per_day"
                                       min="0"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="likes_per_week">Max likes per week</label>
                                <input type="number" id="likes_per_week" class="form-control"
                                       v-model="values.likes_per_week"
                                       name="likes_per_week"
                                       min="0"
                                       required>
                            </div>

                            <div class="form-group">
                                <label for="reposts_per_week">Max reposts per week</label>
                                <input type="number" id="reposts_per_week" class="form-control"
                                       v-model="values.reposts_per_week"
                                       name="reposts_per_week"
                                       min="0"
                                       required>
                            </div>
                            <div v-if="parseInt(values.reposts_per_day) && parseInt(values.reposts_per_week)" class="form-group">
                                <a href="javascript:void(0)" @click="show_reposts = !show_reposts">Customize reposts</a>
                                <div v-show="show_reposts"
                                     class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="b-margin-10 with-after"
                                             v-for="(repost, index) in reposts"
                                             :class="repost.length > max_text_length ? 'error':''"
                                             :data-after="repost.length+'/'+max_text_length">
                                            <textarea class="form-control b-margin-10 minimal-textarea"
                                                      v-model="reposts[index]"
                                                      :name="'reposts['+index+']'"
                                                      ></textarea>
                                            <div @click="reposts.splice(index,1)"
                                                 class="delete">&times;</div>
                                        </div>

                                        <button class="btn btn-primary"
                                                v-if="reposts.length < values.reposts_per_day*values.reposts_per_week"
                                                @click.prevent="reposts.push(default_text);logWeeks();" >Add text template</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="comments_per_week">Max comments per week</label>
                                <input type="number" id="comments_per_week" class="form-control"
                                       v-model="values.comments_per_week"
                                       name="comments_per_week"
                                       min="0"
                                       required>
                            </div>
                            <div class="form-group">
                                <label for="tags">Tags</label>
                                <input id="tags" class="form-control" name="tags"
                                       v-model="values.tags">
                            </div>
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea id="description"
                                          class="form-control minimal-textarea"
                                          name="description"
                                          required>{{values.description}}</textarea>
                            </div>

                            <button class="btn btn-primary">Add</button>

                            <input type="hidden" name="user_id" :value="user_id">
                            <input type="hidden" name="_token" :value="_token">
                            <input type="hidden" name="_method" :value="_method">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import DateCalculations from './mixins/DateCalculations.js';
    export default {
      data () {
        return {
          name:'',
          values:[],
          posts:[],
          reposts:[],
          comments:[],

          default_text: 'Custom text',
          max_text_length: 100,

          show_posts: false,
          show_reposts: false,
          show_comments: false,
        }
      },

      props: [
        'old_values',
        'old_posts',
        'old_reposts',
        'action',
        'back_url',
        'user_id',
        'platforms',

        'session_data',
        '_token',
        '_method'
      ],
      created(){
        this.values = this.old_values;
        this.initTextTemplates();
        console.log('moment: ', Vue.moment());
        console.log('moment: ', Vue.moment().diff(Vue.moment('2018-02-01','YYYY-MM-DD'),'week'));
      },
      computed: {
        weeks_count: function(){

        }
      },
      methods: {
        initTextTemplates() {

          if(!!this.old_reposts && Array.isArray(this.old_reposts))
            this.reposts = this.old_reposts;

          if(!!this.old_posts && Array.isArray(this.old_posts))
            this.posts = this.old_posts;

        },
        session(key){
          if(!!this.session_data && !!this.session_data[key])
            return this.session_data[key];

          return null;
        },
        logWeeks(){
          console.log(this.calculateNumberOfWeeks(this.values.start_date,this.values.end_date,'YYY-mm-dd'));
          console.log(this.values.start_date,this.values.end_date);
        }
      },
      mixins: [DateCalculations]
    }
</script>

<style scoped>
    .minimal-textarea {
        max-width:100%;
        min-width:100%;
        min-height:65px;
    }
    .b-margin-10 {
        margin-bottom: 10px;
    }
    .with-after{
        position: relative;
    }
    .with-after:after {
        content:attr(data-after);
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    .with-after.error:after{
        color:red;
    }
    .delete{
        position: absolute;
        right:10px;
        top:0;
        cursor:pointer;
        font-size:30px;
        line-height:22px;
    }
</style>