vue-kms-switch

npm i vue-kms-switch to install from npm

or it can be linked directly with the links to CDN version:

https://unpkg.com/vue-kms-switch or https://unpkg.com/[email protected]

To use in cakephp project (from CDN)

at the top of the cake template file add:

 <?php
    echo $this->Html->scriptBlock(sprintf(
        'var csrfToken = %s;',
        json_encode($this->request->getAttribute('csrfToken'))
    ));

    echo $this->Html->script('https://cdn.jsdelivr.net/npm/[email protected]');
    echo $this->Html->script('https://unpkg.com/axios/dist/axios.min.js');
    echo $this->Html->script('https://unpkg.com/vue-kms-switch');
?> 

somewhere in the code it needs to have vueapp ID:

 <div id="vueapp">
   <vue-kms-switch 
      switch-url="http://localhost:4433/articles/switch/20" 
      field-name="published"
      :initial-value="true">
   </vue-kms-switch>      
</div>

or if custom html code needs to be set for True/False values, it can be:

 <vue-kms-switch 
   switch-url="http://localhost:4433/articles/switch/20" 
   field-name="published"
   :initial-value="true">
   <template v-slot:true>PUBLISHED</template>
   <template v-slot:false>UNPUBLISHED</template>
</vue-kms-switch>

In the CakePHP template file it can be:

 <vue-kms-switch 
      switch-url="<?php echo $this->Url->build(['controller'=>'Articles','action'=>'switch',$article->id]); ?>" 
      field-name="published"
      :initial-value="<?php echo ($article->published)?'true':'false' ; ?>">
</vue-kms-switch>
<vue-kms-switch 
      switch-url="<?php echo $this->Url->build(['controller'=>'Product','action'=>'switch',$product->id]); ?>" 
      field-name="published"
      :initial-value="<?php echo ($product->in_stock)?'true':'false' ; ?>">
   <template v-slot:true>Available</template>
   <template v-slot:false>Out of stock</template>
</vue-kms-switch>

at the end of the template file it needs to create Vue app and register the component:

 <script>
   axios.defaults.headers.common['X-CSRF-TOKEN'] = window.csrfToken;
   new Vue({
      el: '#vueapp',
      components: {
         VueKmsSwitch
      }
   })
   </script>

CakePHP method should look like this:

       public function switch($id){
         //list of allowed fields for switch method
         $allowedFields=['published','admin_protected'];
         
         header("Access-Control-Allow-Origin: *");
         header("Access-Control-Allow-Methods: PATCH");
         header('Access-Control-Allow-Headers: Content-Type');
         // header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
         
         $field=$this->request->getData()['field'];
         $value=$this->request->getData()['value'];
         
         if ($this->request->is('patch')&&in_array($field, $allowedFields)) {
            $model=$this->modelClass;
            $article=$this->$model->get($id);
            $article->set($field, $value);
            $this->$model->save($article);
            $arr=$this->$model->find('all')
               ->select(['id',$field])
               ->where(['id' => $id])
               ->first()
               ->toArray();

            $myJSON = json_encode(['status' =>1,'results'=>$arr]);
         } else {
            $myJSON = json_encode(['status' =>0]);
         }
         echo($myJSON);
         die();
      }