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

<template>
    <q-page>
        <div class="panel">
            <q-splitter
                    v-model="splitterModel"
                    :horizontal="isHorizontal"
                    :style="myStyle"
                    :limits="[50, 100]"
            >

                <template v-slot:before>
                    <div>
                        <!--{{idProjAtt}}-->
                        <div class="divtitlecat clMain">
                            <div class="flex-container clMain">
                                <q-btn v-if="!!getIdParent && CanISeeProjectParent" size="sm" push color="secondary" round
                                       icon="arrow_back"
                                       :to="getrouteup">

                                </q-btn>

                                <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" :disable="field.disable"
                                                            @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="projs_dacompletare(idProjAtt, areMyProjects)" drake="second">
                                <div :id="tools.getmyid(myproj._id)" :index="index"
                                     v-for="(myproj, index) in projs_dacompletare(idProjAtt, areMyProjects)"
                                     :key="myproj._id" class="myitemdrag">

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

                                    </SingleProject>

                                </div>
                            </div>
                        </div>
                        <q-separator></q-separator>

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

                        </q-input>

                        <br>
                        <q-separator></q-separator>



                        <!--CanIModifyPanelPrivacy = {{CanIModifyPanelPrivacy}}<br>-->
                        <!--CanIModifyPanelPrivacySel = {{CanIModifyPanelPrivacySel}}<br>-->
                        <!--CanISeeProject = {{CanISeeProject}}<br>-->
                        <!--CanISeeProjectSel = {{CanISeeProjectSel}}-->

                        <CTodo ref="ctodo" @setitemsel="setitemsel" :categoryAtt="idProjAtt" title="" backcolor="white"
                               forecolor="black" :viewtaskTop="false" @deselectAllRowsproj="deselectAllRowsproj"
                               @deselectAllRowstodo="deselectAllRowstodo"
                               :CanIModifyTodo="CanIModifyPanelPrivacy"
                        >
                        </CTodo>

                    </div>
                </template>
                <template v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)" v-slot:after>
                    <!--ID = {{itemselproj._id}}-->
                    <div class="q-pa-xs clMain">
                        <div class="flex-container clMain">
                            <!--<q-rating-->
                                    <!--v-model="itemselproj.favourite"-->
                                    <!--class="flex-item flex-icon"-->
                                    <!--size="2em"-->
                                    <!--:max="1"-->
                                    <!--color="primary">-->

                            <!--</q-rating>-->
                            <q-icon class="flex-item flex-icon" name="format_align_center"/>
                            <div class="flex-item projecttitle shadow-4">
                                {{itemselproj.descr}}
                            </div>
                        </div>
                        <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="itemselproj.longdescr"
                                        :label="$t('proj.longdescr')"
                                        outlined
                                        debounce="1000"
                                        autogrow>
                                </q-input>

                            </div>
                        </div>
                        <div v-if="CanISeeProjectSel" class="flex-container clMain">
                            <q-icon class="flex-item flex-icon" name="lock"/>
                            <div class="flex-item itemstatus">
                                <q-select :readonly="readonly_PanelPrivacySel"
                                          rounded outlined v-model="itemselproj.privacyread" :options="selectPrivacy"
                                          :label="$t('proj.privacyread')" emit-value map-options>
                                </q-select>
                            </div>
                            <q-icon class="flex-item flex-icon" name="edit"/>
                            <div class="flex-item itemstatus">
                                <q-select :readonly="readonly_PanelPrivacySel" rounded outlined
                                          v-model="itemselproj.privacywrite" :options="selectPrivacy"
                                          :label="$t('proj.privacywrite')" emit-value map-options>
                                </q-select>
                            </div>
                        </div>
                        <div v-if="CanISeeProjectSel">
                            <div class="flex-container clMain">
                                <q-icon class="flex-item flex-icon" name="work_outline"/>
                                <div class="flex-item itemdescr">
                                    <q-input
                                            ref="input2"
                                            readonly
                                            v-model="itemselproj.hoursworked"
                                            type="number"
                                            rounded outlined
                                            :label="$t('proj.hoursworked')"
                                            debounce="500"></q-input>
                                    <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="input3"
                                            type="number"
                                            readonly
                                            v-model="itemselproj.hoursplanned"
                                            rounded outlined
                                            :label="$t('proj.hoursplanned')"
                                            debounce="500">

                                    </q-input>
                                    <CProgress :descr="$t('proj.progresstask')"
                                               :progressval="itemselproj.progressCalc"></CProgress>
                                </div>
                            </div>
                            <div class="flex-container clMain">
                                <q-icon class="flex-item flex-icon" name="developer_mode"/>
                                <div class="flex-item itemdata">
                                    <CDate :readonly="readonly_PanelPrivacySel" :mydate="itemselproj.begin_development"
                                           @input="itemselproj.begin_development = new Date(arguments[0])"
                                           :label="$t('proj.begin_development')">
                                    </CDate>
                                </div>
                                <div style="margin: 10px;"></div>
                                <div class="flex-item itemdata">
                                    <CDate :readonly="readonly_PanelPrivacySel" :mydate="itemselproj.begin_test"
                                           @input="itemselproj.begin_test = new Date(arguments[0])"
                                           :label="$t('proj.begin_test')">
                                    </CDate>
                                </div>
                            </div>
                            <div class="flex-container clMain">
                                <q-icon class="flex-item flex-icon" name="outlined_flag"/>
                                <div class="flex-item itemstatus">
                                    <q-select :readonly="readonly_PanelPrivacySel" rounded outlined v-model="itemselproj.actualphase" :options="selectPhase"
                                              :label="$t('proj.actualphase')" emit-value map-options>
                                    </q-select>
                                </div>
                                <q-icon class="flex-item flex-icon" name="outlined_flag"/>
                                <div class="flex-item itemstatus">
                                    <q-select :readonly="readonly_PanelPrivacySel" rounded outlined v-model="itemselproj.totalphases" :options="selectPhase"
                                              :label="$t('proj.totalphases')" emit-value map-options>
                                    </q-select>
                                </div>
                            </div>

                            <div class="flex-container clMain">
                                <q-icon class="flex-item flex-icon" name="watch_later"/>
                                <div class="flex-item itemdata content-center">
                                    <q-input
                                            :readonly="readonly_PanelPrivacySel"
                                            ref="input3"
                                            type="number"
                                            v-model="itemselproj.hoursweeky_plannedtowork"
                                            rounded outlined
                                            maxlength="2"
                                            :label="$t('proj.hoursweeky_plannedtowork')"
                                            debounce="500">

                                    </q-input>
                                    <CProgress :progressval="calcprogressWeekly"></CProgress>
                                </div>
                                <q-icon class="flex-item flex-icon" name="developer_mode"/>
                                <div class="flex-item itemdata">
                                    <CDate color="green-2" :mydate="calcEndWork_Estimate" :readonly="true"
                                           :label="$t('proj.endwork_estimate')">
                                    </CDate>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)" v-slot:after>
                    <div class="q-pa-xs clMain">
                        <div class="flex-container clMain">
                            <q-icon class="flex-item flex-icon" name="border_color"/>
                            <div class="flex-item itemdescr">
                                <q-input
                                        ref="input4"
                                        v-model="itemtodosel.descr"
                                        :label="$t('proj.longdescr')"
                                        outlined
                                        debounce="1000"
                                        autogrow>

                                </q-input>
                            </div>
                        </div>
                    </div>
                    <div class="flex-container clMain">
                        <q-icon class="flex-item flex-icon" name="done_outline"/>
                        <div class="flex-item itemstatus">
                            <q-select rounded outlined v-model="itemtodosel.statustodo" :options="selectStatus"
                                      :label="$t('todo.status')" emit-value map-options
                                      @input="modifyfieldtodo('statustodo')">
                            </q-select>
                        </div>
                        <q-icon class="flex-item flex-icon" name="outlined_flag"/>
                        <div class="flex-item itemstatus">
                            <q-select rounded outlined v-model="itemtodosel.phase" :options="selectPhase"
                                      :label="$t('todo.phase')" emit-value map-options>
                            </q-select>
                        </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="input5"
                                    v-model="itemtodosel.hoursworked"
                                    type="number"
                                    rounded outlined
                                    :label="$t('proj.hoursworked')"
                                    debounce="500">

                            </q-input>
                            <CProgress descr="" :progressval="getCalcTodoHoursWorked"></CProgress>
                        </div>
                        <q-icon class="flex-item flex-icon" name="watch_later"/>
                        <div class="flex-item itemdata content-center">
                            <q-input
                                    ref="input6"
                                    type="number"
                                    v-model="itemtodosel.hoursplanned"
                                    rounded outlined
                                    :label="$t('proj.hoursplanned')"
                                    debounce="500">

                            </q-input>

                            <CProgress :descr="$t('proj.progresstask')"
                                       :progressval="itemtodosel.progress"
                                       :slider="true" @input="itemtodosel.progress = arguments[0]"></CProgress>
                        </div>
                    </div>
                    <div class="flex-container clMain">
                        <q-icon class="flex-item flex-icon" name="developer_mode"/>
                        <div class="flex-item itemdata">
                            <CDate :mydate="itemtodosel.start_date"
                                   @input="itemtodosel.start_date = new Date(arguments[0])"
                                   :label="$t('todo.start_date')">

                            </CDate>
                        </div>
                        <div style="margin: 10px;"></div>
                        <q-icon class="flex-item flex-icon" name="event"/>
                        <div class="flex-item itemdata">
                            <CDate :readonly="itemtodosel.statustodo !== tools.Status.COMPLETED"
                                   :mydate="itemtodosel.completed_at"
                                   @input="itemtodosel.completed_at = new Date(arguments[0])"
                                   :label="$t('todo.completed_at')">
                            </CDate>
                        </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>