Subversion Repositories wpShopGermany4

<?php

        declare(strict_types=1);

        /**
         * User: Daschmi (daschmi@daschmi.de)
         * Date: 04.11.2021
         * Time: 10:28
         */
        
?>

<script src="<?php echo WPSG_URL_CONTENT.'plugins/'.WPSG_FOLDERNAME.'/views/js/vue3.js'; ?>"></script>

<div id="wpsg_mod_orderstates_app">
    
    <textarea name="wpsg_mod_orderstates[states]" class="none">{{arStates}}</textarea>
    
    <p class="flex items-center justify-between">
        <template v-if="arStatesNotDeleted.length === 0">            
            <?php echo __('Keine Bestellzustände angelegt.', 'wpsg'); ?>
        </template>
        <template v-if="arStatesNotDeleted.length === 1">
            <?php echo __('Ein Bestellzustand wurde definiert.', 'wpsg'); ?>
        </template> 
        <template v-else>
            {{arStatesNotDeleted.length}} <?php echo __('Bestellzustände wurden definiert.', 'wpsg'); ?>
        </template>
        <a href="#" @click.prevent="add()">
            <span class="wpsg-glyphicon glyphicon glyphicon-plus"></span><?php echo __('Neuen Bestellzustand anlegen', 'wpsg'); ?>
        </a>
    </p> 
    
    <table class="w-full mt-2"> 
        <tbody v-for="(row, i) of arStatesNotDeleted">
            <tr>
                <td class="p-1 w-full">
                    <input class="w-full box-border" type="text" v-model="row.name" />
                </td>
                <td class="p-1 text-right">
                    
                    <a href="#" @click.prevent="deleteRow(row)" title="<?php echo __('Bestellzustand löschen', 'wpsg'); ?>">
                        <span class="glyphicon glyphicon-trash"></span>
                    </a>
                    
                </td>
            </tr>
        </tbody>
    </table> 
    
</div>

<script>
    
    const Counter = {
        data() {
            return {
                arStates: <?php echo json_encode($this->view['arStates']); ?>
            }
        },
        computed: {
                        arStatesNotDeleted() {
                                
                                let r = [];
                                
                                for (let s of this.arStates) if (s.deleted !== '1') r.push(s);
                                
                                return r;
                                
            }
        },
        methods: {
                        add() {
                                
                                this.arStates.push({
                    id: 0,
                    name: '',
                    deleted: 0                    
                                });
                                
            },
            deleteRow(row) {
                                
                                row.deleted = '1'; 
                                
            }
        }
    }

    Vue.createApp(Counter).mount('#wpsg_mod_orderstates_app')
    
</script>