freeplanet/src/views/projects/proj-list/proj-list.vue

<template>
    <q-page>
        <div class="panel">

            <q-splitter
                    v-model="splitterModel"
                    :limits="[50, 100]"
            >

                <template v-slot:before class="clMain">
                    <div>
                        <div class="divtitlecat clMain">
                            <div class="flex-container clMain">
                                <q-btn v-if="!!idProjParentAtt" size="sm" push color="secondary" round
                                       icon="arrow_back"
                                       :to="getrouteup"/>
                                <div class="flex-item categorytitle shadow-4">{{descrProject | capitalize}}</div>
                                <div class="flex-item">
                                    <q-btn push
                                           size="sm"
                                           icon="settings">
                                        <q-menu id="popconfig" self="top right">
                                            <q-list link separator no-border class="todo-menu">
                                                <div v-for="field in menuPopupConfigProject" :key="field.value">
                                                    <q-item clickable v-if="(field.value === 150)">
                                                        <q-item-section avatar>
                                                            <q-icon :name="field.icon"/>
                                                        </q-item-section>

                                                        <q-item-section>{{field.label}}</q-item-section>
                                                        <q-item-section side>
                                                            <q-icon name="keyboard_arrow_right"/>
                                                        </q-item-section>

                                                        <q-menu auto-close anchor="bottom middle" self="top middle">
                                                            <q-list dense>
                                                                <q-item side clickable :icon="field.icon">

                                                                    <q-item-section>
                                                                        <q-list dense>
                                                                            <q-item clickable v-ripple
                                                                                    v-for="opt in listOptionShowTask"
                                                                                    :key="opt.value"
                                                                                    @click="showtype = opt.value">
                                                                                <q-item-section avatar>
                                                                                    <q-icon :name="opt.icon" inverted
                                                                                            color="primary"/>
                                                                                </q-item-section>
                                                                                <q-item-section>
                                                                                    {{opt.label}}
                                                                                </q-item-section>
                                                                            </q-item>
                                                                        </q-list>
                                                                    </q-item-section>
                                                                </q-item>
                                                            </q-list>
                                                        </q-menu>
                                                    </q-item>
                                                    <q-item v-else v-close-popup clickable :icon="field.icon"
                                                            @click="clickMenuProjList(field.value)">

                                                        <q-item-section avatar>
                                                            <q-icon :name="field.icon"/>
                                                        </q-item-section>

                                                        <q-item-section>{{field.label}}</q-item-section>
                                                    </q-item>
                                                </div>
                                            </q-list>
                                        </q-menu>
                                    </q-btn>
                                </div>
                            </div>
                        </div>

                        <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
                        <div>
                            <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
                            <div class="container" v-dragula="items_dacompletare(idProjAtt)" drake="second">
                                <div :id="tools.getmyid(myproj._id)" :index="index"
                                     v-for="(myproj, index) in items_dacompletare(idProjAtt)"
                                     :key="myproj._id" class="myitemdrag">

                                    <SingleProject ref="singleproject" @deleteItemproj="mydeleteitemproj(myproj._id)"
                                                   @eventupdateproj="updateitemproj"
                                                   @idsel="setidsel"
                                                   @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndproj"
                                                   :itemproject='myproj'>

                                    </SingleProject>

                                </div>
                            </div>
                            <!--</q-infinite-scroll>-->


                            <q-input ref="insertProjectBottom" v-model="projbottom"
                                     style="margin-left: 6px;"
                                     color="blue-12"
                                     :label="$t('todo.insertbottom')"
                                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                                     v-on:keyup.enter="dbInsert()">

                            </q-input>

                            <br>
                        </div>
                    </div>
                </template>
                <template v-if="!!itemsel.descr" v-slot:after>
                    <div class="q-pa-xs clMain">
                        <div class="flex-container clMain">
                            <q-icon class="flex-item flex-icon" name="format_align_center"/>
                            <div class="flex-item projecttitle shadow-4">
                                {{itemsel.descr}}
                            </div>
                        </div>
                        <q-separator/>
                        <div class="flex-container clMain">
                            <q-icon class="flex-item flex-icon" name="border_color"/>
                            <div class="flex-item itemdescr">
                                <q-input
                                        ref="input"
                                        v-model="itemsel.longdescr"
                                        :label="$t('proj.longdescr')"
                                        outlined
                                        debounce="500"
                                        autogrow
                                />

                            </div>
                        </div>
                        <div class="flex-container clMain">
                            <q-icon class="flex-item flex-icon" name="work_outline"/>
                            <div class="flex-item itemdescr">
                                <q-input
                                        ref="input"
                                        v-model="itemsel.hoursworked"
                                        type="number"
                                        rounded outlined
                                        :label="$t('proj.hoursworked')"
                                        debounce="500"
                                />
                                <CProgress descr="" :progressval="getCalcHoursWorked"></CProgress>

                            </div>
                            <q-icon class="flex-item flex-icon" name="watch_later"/>
                            <div class="flex-item itemdata content-center">
                                <q-input
                                        ref="input"
                                        type="number"
                                        v-model="itemsel.hoursplanned"
                                        rounded outlined
                                        :label="$t('proj.hoursplanned')"
                                        debounce="500"
                                />
                                <CProgress :descr="$t('proj.progresstask')"
                                           :progressval="itemsel.progressCalc"></CProgress>
                            </div>
                        </div>
                        <div class="flex-container clMain">
                            <div style="margin: 10px;"></div>
                            <div class="flex-item itemdata">
                                <q-input v-model="itemsel.begin_development" mask="date" :hint="$t('proj.begin_development')">
                                    <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
                                    <q-icon name="event" class="cursor-pointer">
                                        <q-popup-proxy>
                                            <q-date v-model="itemsel.begin_development" today-btn/>
                                        </q-popup-proxy>
                                    </q-icon>
                                </q-input>
                            </div>
                            <div style="margin: 10px;"></div>
                            <div class="flex-item itemdata">
                                <q-input v-model="itemsel.begin_test" mask="date" :hint="$t('proj.begin_test')">
                                    <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
                                    <q-icon name="event" class="cursor-pointer">
                                        <q-popup-proxy>
                                            <q-date v-model="itemsel.begin_test" today-btn/>
                                        </q-popup-proxy>
                                    </q-icon>
                                </q-input>
                            </div>
                        </div>
                    </div>
                </template>
            </q-splitter>
        </div>
    </q-page>


</template>
<script lang="ts" src="./proj-list.ts">
</script>
<style lang="scss" scoped>
    @import './proj-list';
</style>